{"componentChunkName":"component---src-templates-post-js","path":"/blog/k-vrc-vector-cozmo-2","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🤖 机器人眼睛动画的实现 2","tips":[],"categories":["code"],"datetime":"2021-09-04 16:34:10","noFooter":false,"description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","plainTextDescription":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='202'%3e%3cpath%20d='M8%2022v51l1%2050h384V21H201L8%2022'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.976627712854758,"src":"/static/c289618fe7e452b4133a03b30b5de03a/35fc7/banner.png","srcSet":"/static/c289618fe7e452b4133a03b30b5de03a/82675/banner.png 500w,\n/static/c289618fe7e452b4133a03b30b5de03a/fef60/banner.png 1000w,\n/static/c289618fe7e452b4133a03b30b5de03a/35fc7/banner.png 2000w,\n/static/c289618fe7e452b4133a03b30b5de03a/7cf47/banner.png 2368w","srcWebp":"/static/c289618fe7e452b4133a03b30b5de03a/e1a1e/banner.webp","srcSetWebp":"/static/c289618fe7e452b4133a03b30b5de03a/7fe04/banner.webp 500w,\n/static/c289618fe7e452b4133a03b30b5de03a/d619e/banner.webp 1000w,\n/static/c289618fe7e452b4133a03b30b5de03a/e1a1e/banner.webp 2000w,\n/static/c289618fe7e452b4133a03b30b5de03a/71fe7/banner.webp 2368w","sizes":"(max-width: 2000px) 100vw, 2000px"}}},"bannerCredit":null,"slug":"/blog/k-vrc-vector-cozmo-2","tags":["整理","思考"]},"headings":[{"value":"〇、上回书说到","depth":2},{"value":"一、动画文件的参数","depth":2},{"value":"二、动画片段推断出准确绘制","depth":2},{"value":"三、动画片段的实现","depth":2},{"value":"四、序列帧动画","depth":3},{"value":"完结","depth":3}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"k-vrc-vector-cozmo-2\",\n \"title\": \"🤖 机器人眼睛动画的实现 2\",\n \"date\": \"2021-09-04 16:34:10\",\n \"author\": \"Ubug\",\n \"description\": \"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u4E00\\u4E2A\\u5DF2\\u7ECF\\u6709\\u521D\\u6B65\\u601D\\u8DEF\\u7684\\u95EE\\u9898\\uFF0C\\u600E\\u4E48\\u518D\\u8FDB\\u4E00\\u6B65\\u5B9E\\u73B0\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u5F62\\u6001\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u3007\\u3001\\u4E0A\\u56DE\\u4E66\\u8BF4\\u5230\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u5199\\u4E86\\u5B9E\\u73B0\\u9759\\u6001\\u7684\\u56FE\\u50CF\\u4E86\\uFF0C\\u4E0D\\u8FC7\\u5B98\\u65B9\\u7684\\u5F00\\u6E90\\u4E2D\\u8FD8\\u5305\\u542B\\u4E86\\u4E00\\u4E2A\\u52A8\\u753B\\u7684\\u8D44\\u6E90\\uFF0C\\u591A\\u8FBE\\u4E00\\u5343\\u591A\\u4E2A\\u52A8\\u753B\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u5199\\u5199\\u600E\\u4E48\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"374px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.40926640926641%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHZEtFJD//EABkQAAIDAQAAAAAAAAAAAAAAAAABAhAREv/aAAgBAQABBQK0+pGH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAABAxAf/aAAgBAQAGPwKqmv8A/8QAGxAAAwACAwAAAAAAAAAAAAAAAAEREDEhYZH/2gAIAQEAAT8he3yRtVNk7eExIJRTD//aAAwDAQACAAMAAAAQx8//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/EErY/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRcfH/2gAIAQEAAT8QoA6HggKJB2Z5Pnh2xTc9qWI4XYhZ/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"anims\",\n \"title\": \"anims\",\n \"src\": \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg\",\n \"srcSet\": [\"/static/55a4f4fadfe744cf40309097b00d7fbd/fca29/anims.jpg 259w\", \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg 374w\"],\n \"sizes\": \"(max-width: 374px) 100vw, 374px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u52A8\\u753B\\u6587\\u4EF6\\u7684\\u53C2\\u6570\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E00\\u4E2A\\u52A8\\u753B\\u7684\\u63A7\\u5236\\u6570\\u636E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"{\\n \\\"anim_attention_lookatdevice_01\\\": [\\n {\\n \\\"durationTime_ms\\\": 66,\\n \\\"triggerTime_ms\\\": 0,\\n \\\"Name\\\": \\\"LiftHeightKeyFrame\\\",\\n \\\"heightVariability_mm\\\": 0,\\n \\\"height_mm\\\": 32\\n },\\n {\\n \\\"angleVariability_deg\\\": 0,\\n \\\"angle_deg\\\": 0,\\n \\\"triggerTime_ms\\\": 0,\\n \\\"Name\\\": \\\"HeadAngleKeyFrame\\\",\\n \\\"durationTime_ms\\\": 66\\n },\\n {\\n \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n \\\"faceScaleY\\\": 0.9664786143465788,\\n \\\"scanlineOpacity\\\": 1.0,\\n \\\"faceScaleX\\\": 0.8656703051258197,\\n \\\"leftEye\\\": [ 8.107326060759803, 0.0, 1.72115997174465, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"faceAngle\\\": 0.0,\\n \\\"durationTime_ms\\\": 0,\\n \\\"faceCenterY\\\": 0.0,\\n \\\"faceCenterX\\\": 0.0,\\n \\\"rightEye\\\": [ -7.315991464547729, 0.0, 1.72115997174465, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"triggerTime_ms\\\": 0\\n },\\n {\\n \\\"eventGroups\\\": [{\\n \\\"probabilities\\\": [1.0],\\n \\\"audioName\\\": [\\\"Play__Robot_Vic_Sfx__Head_Up_Short\\\"],\\n \\\"eventIds\\\": [2451569527],\\n \\\"volumes\\\": [1.0]\\n }],\\n \\\"triggerTime_ms\\\": 66,\\n \\\"Name\\\": \\\"RobotAudioKeyFrame\\\"\\n },\\n {\\n \\\"Right\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"Name\\\": \\\"BackpackLightsKeyFrame\\\",\\n \\\"durationTime_ms\\\": 66,\\n \\\"Back\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"Middle\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"Front\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"triggerTime_ms\\\": 0,\\n \\\"Left\\\": [ 0.0, 0.0, 0.0, 0.0\\n ]\\n },\\n {\\n \\\"durationTime_ms\\\": 99,\\n \\\"speed\\\": -2,\\n \\\"triggerTime_ms\\\": 66,\\n \\\"Name\\\": \\\"BodyMotionKeyFrame\\\",\\n \\\"radius_mm\\\": 1\\n }\\n ]\\n}\\n\")), mdx(\"p\", null, \"\\u5927\\u6982\\u80FD\\u5206\\u6790\\u6709\\u591A\\u79CD\\u7C7B\\u578B\\u7684\\u63A7\\u5236\\uFF0C\\u4EE5 ms \\u4E3A\\u5355\\u4F4D\\u6392\\u5E03\\uFF0C\\u80FD\\u63A7\\u5236\\u591A\\u79CD\\u7C7B\\u578B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"FaceAnimationKeyFrame // \\u8868\\u60C5\\u63A7\\u5236\\u5173\\u952E\\u5E27\\nProceduralFaceKeyFrame // \\u7A0B\\u5E8F\\u8868\\u60C5\\u5173\\u952E\\u5E27\\nRobotAudioKeyFrame // \\u58F0\\u97F3\\u5173\\u952E\\u5E27\\nBackpackLightsKeyFrame // \\u80CC\\u90E8\\u706F\\u5149\\u5173\\u952E\\u5E27\\nLiftHeightKeyFrame // \\u624B\\u90E8\\u9AD8\\u5EA6\\u5173\\u952E\\u5E27\\nBodyMotionKeyFrame // \\u8EAB\\u4F53\\u8FD0\\u52A8\\u5173\\u952E\\u5E27\\nHeadAngleKeyFrame // \\u5934\\u90E8\\u89D2\\u5EA6\\u5173\\u952E\\u5E27\\n\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u8FD9\\u91CC\\u5173\\u5FC3\\u7684\\u5C31\\u662F\\u8868\\u60C5\\u63A7\\u5236\\u548C\\u7A0B\\u5E8F\\u8868\\u60C5\\u5173\\u952E\\u5E27\\uFF0C\\u5728\\u7A0B\\u5E8F\\u91CC\\u9762\\u88AB\\u79F0\\u4E3A\\uFF1A\\u52A8\\u753B\\u7247\\u6BB5 (animClip)\\n\\u548C\\u5E8F\\u5217\\u5E27\\u52A8\\u753B (spriteSequence)\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u52A8\\u753B\\u7247\\u6BB5\\u63A8\\u65AD\\u51FA\\u51C6\\u786E\\u7ED8\\u5236\"), mdx(\"p\", null, \"\\u770B\\u4E0B\\u5173\\u952E\\u5E27\\u7684\\u53C2\\u6570\\uFF0C\\u5C31\\u4F1A\\u53D1\\u73B0\\u548C\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u8BF4\\u7684 pose \\u5E94\\u8BE5\\u662F\\u540C\\u4E00\\u5957\\u6570\\u636E\\uFF0C\\u53EA\\u9700\\u8981\\u7565\\u52A0\\u8F6C\\u6362\\u5C31\\u80FD\\u7528\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n \\\"faceScaleY\\\": 0.9664786143465788,\\n \\\"scanlineOpacity\\\": 1.0,\\n \\\"faceScaleX\\\": 0.8656703051258197,\\n \\\"leftEye\\\": [ 8.107326060759803, 0.0, 1.72115997174465, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"faceAngle\\\": 0.0,\\n \\\"durationTime_ms\\\": 0,\\n \\\"faceCenterY\\\": 0.0,\\n \\\"faceCenterX\\\": 0.0,\\n \\\"rightEye\\\": [ -7.315991464547729, 0.0, 1.72115997174465, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"triggerTime_ms\\\": 0\\n}\\n\")), mdx(\"p\", null, \"\\u5177\\u4F53\\u8FD9\\u4E9B\\u53C2\\u6570\\u7684\\u542B\\u4E49\\u80FD\\u591F\\u5728 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/digital-dream-labs/vector/blob/7a2761097f4d8a545d6db91b0a97bd632d8336f8/cannedAnimLib/proceduralFace/proceduralFace.cpp#L90\"\n }, \"\\u8FD9\\u91CC\"), \" \\u627E\\u5230\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/1b1c15fa4604895405ea1b0d0adaa78d/fda45/face-keyframe.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"55.98455598455598%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB1klEQVQoz22S666bMBCE8/5v2J5wvxuwwQZsEuVMZ03Snh9FGoGs9bczu9z23cEvFeyQQndf0CpF1/6OKqtf6PsEE89EI6VYZ3SJzbZYeW+ecoRjALAC3wa38wxYTY+6vKNvMjR1ipLfDb9Xt6BWI0atYZ2Bc5rQOkoNFTY349ivs3lusK4jbo/Hk8U7srxE3XSo6pbOGig1QR5lPNo5QK8e87IhSXPcE1FG9wqTtijbCdqsWNZNgA9Ya5EXJV21BDYEX9J0psyOXhO27tAL6/KczQuCM7qamcJj0A7P5xPCuoXzZJQNRUlg26F+Az8NBNjp4w10PC8ILZASOBFoNw/DRgI7ybod3jOyQ5bl0V1ZVVQdL1R89/OOZj4wLTtmY+O5uPu6JxjHEYtjM70SeF5A7wPc9sMh3YkzeUujcTn+7zC7Itvdx1FEhxJZHDpelKI6zrCOTkXS8QOMDnlRkoiSJCVQwxE4Gcfad2Qfzujk31JqtN3l9APsuWljD26Ro/m7lAu4HYGNHEJ4RxayLCUC2zYuRdwNg8Lr9cJgDi7m4DYP/o9XkuwdWWa40aFhI8+kccs+hOu3+RFZoHJp42zV4iNQHPaTjQ7T7FLX9REmMxSOAP8AcPo6lmU8VKEAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"face keyframe\",\n \"title\": \"face keyframe\",\n \"src\": \"/static/1b1c15fa4604895405ea1b0d0adaa78d/0dc48/face-keyframe.png\",\n \"srcSet\": [\"/static/1b1c15fa4604895405ea1b0d0adaa78d/2c191/face-keyframe.png 259w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/86b01/face-keyframe.png 518w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/0dc48/face-keyframe.png 1035w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/aae66/face-keyframe.png 1553w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/1c66b/face-keyframe.png 2070w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/fda45/face-keyframe.png 2092w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u9ED8\\u8BA4\\u503C\\u548C\\u542B\\u4E49\\u90FD\\u662F\\u548C json \\u6587\\u4EF6\\u4E2D\\u7684\\u53C2\\u6570\\u90FD\\u662F\\u4E00\\u4E00\\u5BF9\\u5E94\\u7684\\uFF0C\\u800C\\u4E14\\u63D0\\u4F9B\\u4E86\\u66F4\\u8BE6\\u7EC6\\u7684\\u53C2\\u6570\\u7C7B\\u578B\\u548C\\u8BA1\\u7B97\\u65B9\\u6CD5\\uFF0C\\u6BD4\\u5982\\u773C\\u775B\\u7684\\u4F4D\\u7F6E\\u662F\\u548C\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u53C2\\u6570\\u4F4D\\u7F6E\\u76F8\\u52A0\\u7684\\u503C\\uFF0C\\u8303\\u56F4\\u5728\\u5BBD\\u5EA6\\u7684\\u4E00\\u534A\\u4E4B\\u95F4\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// \\u6BD4\\u5982\\ndrawEyeX = neutralEyeX + [\\u914D\\u7F6E\\u7684\\u53C2\\u6570]\\n\")), mdx(\"p\", null, \"\\u800C\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u5728 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/digital-dream-labs/vector/blob/7a2761097f/animProcess/src/cozmoAnim/animation/animationStreamer.cpp#L404\"\n }, \"\\u8FD9\\u91CC\"), \" \\u53EF\\u4EE5\\u627E\\u5230\\u540D\\u79F0\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/72e316ec0f89368392081a02d1b47b88/02a99/neutral-face.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"25.86872586872587%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAABBklEQVQY0y2PCW6DMBQFuf/9qmxNs0GaAN4XbCBMDaql0XvWt0d2pbVkzjfuvwfuzY5Xe8Lbb5z6wpsDUqzs0eqAKajSRb8j2CNTujIOly2nkst4ozLWMc/Q1JKfuuf6lLS95lE/OV8bjnfBqTZcyvz8EOwvHbenRppIJz3v3hXstv98oFLGwmdG9z2vTtF3Le37Tdd11E1TLhlsnHAh4WJGuowbZmLKDDEQo8dazTSNrKty3rMsC8kFtAmEmFDaIqRGCIkxRVh+4ZwjhDIPvnRbRAE/TJvcxJkh/Qt9ObQKnR8QOqJcyfL8VkWEMkVu6FTAWE8eR3IeSTkzrn2cN1JhmuZN+AcDXn2II/BasgAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"neutral face\",\n \"title\": \"neutral face\",\n \"src\": \"/static/72e316ec0f89368392081a02d1b47b88/0dc48/neutral-face.png\",\n \"srcSet\": [\"/static/72e316ec0f89368392081a02d1b47b88/2c191/neutral-face.png 259w\", \"/static/72e316ec0f89368392081a02d1b47b88/86b01/neutral-face.png 518w\", \"/static/72e316ec0f89368392081a02d1b47b88/0dc48/neutral-face.png 1035w\", \"/static/72e316ec0f89368392081a02d1b47b88/aae66/neutral-face.png 1553w\", \"/static/72e316ec0f89368392081a02d1b47b88/02a99/neutral-face.png 1582w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u7FFB\\u4E0B\\u52A8\\u753B\\u6587\\u4EF6\\u5939\\u627E\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"anim_neutral_eyes_01\"), \" \\u62FF\\u5230\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n \\\"triggerTime_ms\\\": 0,\\n \\\"durationTime_ms\\\": 0,\\n \\\"scanlineOpacity\\\": 1.0,\\n \\\"faceScaleX\\\": 1.0,\\n \\\"faceScaleY\\\": 1.0,\\n \\\"faceCenterX\\\": 0.0,\\n \\\"faceCenterY\\\": 0.0,\\n \\\"faceAngle\\\": 0.0,\\n \\\"leftEye\\\": [8.107326060759803, 0.0, 1.5174507300664741, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0],\\n \\\"rightEye\\\": [-7.315991464547729, 0.0, 1.5174507300664741, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0]\\n}\\n\")), mdx(\"p\", null, \"\\u6BD4\\u7167\\u7740\\u4E0A\\u9762\\u7684\\u53C2\\u6570\\u542B\\u4E49\\uFF0C\\u52A0\\u4E0A\\u4E00\\u70B9\\u70B9\\u7684\\u7FFB\\u770B\\u6E90\\u7801\\uFF0C\\u6211\\u4EEC\\u80FD\\u591F\\u77E5\\u9053\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u4E0B\\u7684\\u5404\\u4E2A\\u53C2\\u6570\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u6574\\u4E2A\\u9762\\u90E8\\u5C3A\\u5BF8\\nFACE_DISPLAY_WIDTH = 184\\nFACE_DISPLAY_HEIGHT = 96\\n// \\u5355\\u4E2A\\u773C\\u775B\\u5927\\u5C0F\\nNominalEyeHeight = 57\\nNominalEyeWidth = 43\\n// \\u4E24\\u4E2A\\u773C\\u775B\\u95F4\\u8DDD\\u5927\\u5C0F\\nkProcFace_NominalEyeSpacing = 92\\n\\n// \\u6839\\u636E\\u95F4\\u8DDD\\u8BA1\\u7B97\\u4E24\\u4E2A\\u773C\\u775B\\u7684\\u7EDD\\u5BF9\\u4F4D\\u7F6E\\nconst NominalLeftEyeX = (FACE_DISPLAY_WIDTH - kProcFace_NominalEyeSpacing) / 2;\\nconst NominalRightEyeX = NominalLeftEyeX + kProcFace_NominalEyeSpacing;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u5927\\u81F4\\u80FD\\u770B\\u51FA\\u6765\\u52A8\\u753B Clip \\u7684\\u5B9E\\u73B0\\u624D\\u662F\\u6574\\u4E2A\\u8868\\u60C5\\u7684\\u6838\\u5FC3\\uFF0C\\u4E4B\\u524D\\u7684 POSE \\u7684\\u5B9E\\u73B0\\u4E5F\\u662F\\u6765\\u81EA\\u4E8E\\u6B64\\u3002\")), mdx(\"p\", null, \"\\u6709\\u4E86\\u8FD9\\u4E9B\\u53C2\\u6570\\uFF0C\\u6E90\\u7801\\u91CC\\u9762\\u4E5F\\u6709\\u5176\\u4ED6\\u5706\\u89D2\\u7684\\u5B9E\\u73B0\\uFF0C\\u8FD9\\u91CC\\u6211\\u4EEC\\u5C31\\u53EF\\u4EE5\\u91CD\\u6784\\u51FA\\u4E00\\u7248\\u51C6\\u786E\\u7ED8\\u5236\\u7684\\u5B9E\\u73B0\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"drawFace = (\\n ctrls: EyesControls,\\n blink: BlinkParams = { x: 1, y: 1 },\\n) {\\n // \\u6E05\\u7A7A\\u753B\\u5E03\\n this.scope.project.clear();\\n\\n // \\u65B0\\u5EFA\\u56FE\\u5C42\\n new this.scope.Layer();\\n // \\u521B\\u5EFA\\u65B0\\u7684\\u77E9\\u5F62\\u4EE5\\u4FBF\\u7ED8\\u5236\\u6837\\u5F0F\\n const rect = new this.scope.Rectangle(\\n FACE_DISPLAY_WIDTH,\\n FACE_DISPLAY_HEIGHT\\n );\\n new this.scope.Path.Rectangle(rect);\\n\\n // \\u65B0\\u5EFA\\u56FE\\u5C42\\n const activeLayer = new this.scope.Layer();\\n\\n // \\u7ED8\\u5236\\u4E24\\u4E2A\\u773C\\u7684\\u5F62\\u72B6\\n this.genEyeShape(ctrls.left, blink);\\n this.genEyeShape(ctrls.right, blink);\\n\\n // \\u65BD\\u52A0\\u7F29\\u653E\\u3001\\u65CB\\u8F6C\\u548C\\u53D8\\u5F62\\u7684\\u64CD\\u4F5C\\n activeLayer.scale(ctrls.FaceScaleX, ctrls.FaceScaleY);\\n activeLayer.rotate(ctrls.FaceAngle);\\n activeLayer.translate(...);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"genEyeShape(ctrl: EyeControls, blink: BlinkParams = { x: 1, y: 1 }) {\\n // ... \\u83B7\\u53D6\\u57FA\\u672C\\u53C2\\u6570\\n\\n // ========== \\u773C\\u7751\\n const newLidClip = new this.scope.Path();\\n const lidFix = new this.scope.Point(EyeCenterX - halfEyeWidth, EyeCenterY - halfEyeHeight);\\n\\n const upperYAdj = halfEyeWidth * Math.tan((Math.PI / 180) * UpperLidAngle);\\n const upperYRad = -UpperLidBend * eyeHeight;\\n const upperY = -UpperLidY * eyeHeight;\\n newLidClip.add(new this.scope.Point(-1, upperY - upperYAdj).add(lidFix));\\n newLidClip.quadraticCurveTo(\\n new this.scope.Point(halfEyeWidth, upperYRad).add(lidFix),\\n new this.scope.Point(eyeWidth + 1, upperY + upperYAdj).add(lidFix)\\n );\\n\\n //...\\u4E0B\\u773C\\u7751\\n\\n // ========== \\u773C\\u89D2\\n const eyeSize = [halfEyeWidth, halfEyeHeight];\\n const cornerCalc = (v: number[]) => v.map((v, i) => v * eyeSize[i]);\\n\\n let cornerOT = cornerCalc([ctrl.UpperOuterRadiusX, ctrl.UpperOuterRadiusY]);\\n let cornerIT = cornerCalc([ctrl.UpperInnerRadiusX, ctrl.UpperInnerRadiusY]);\\n let cornerIB = cornerCalc([ctrl.LowerInnerRadiusX, ctrl.LowerInnerRadiusY]);\\n let cornerOB = cornerCalc([ctrl.LowerOuterRadiusX, ctrl.LowerOuterRadiusY]);\\n\\n const newEye = new this.scope.Path();\\n\\n // \\u5DE6\\u4E0A\\u5706\\u89D2\\uFF0C\\u4ECE\\u5DE6\\u8FB9\\u753B\\u5706\\u5F27\\u5230\\u4E0A\\u8FB9\\n newEye.add(new this.scope.Point(0, cornerOT[1]));\\n newEye.quadraticCurveTo(\\n new this.scope.Point(0, 0),\\n new this.scope.Point(cornerOT[0], 0)\\n );\\n\\n //... \\u5176\\u4ED6\\u7684\\u5706\\u89D2\\n\\n newEye.closed = true;\\n newEye.position = new this.scope.Point(ctrl.EyeCenterX, ctrl.EyeCenterY);\\n\\n // ====================== \\u773C\\u775B\\u548C\\u773C\\u7751\\u7684\\u4EA4\\u96C6\\n const eyeIntersect = newLidClip.intersect(newEye, { insert: true });\\n\\n // \\u83B7\\u53D6\\u4EA4\\u96C6\\u4E4B\\u540E\\uFF0C\\u4E4B\\u524D\\u7684\\u5F62\\u72B6\\u5220\\u9664\\n newLidClip.remove();\\n newEye.remove();\\n\\n // ====================== \\u773C\\u775B\\u7684\\u53D8\\u6362\\n eyeIntersect.scale(\\n ctrl.EyeScaleX * (blink.x || 1),\\n ctrl.EyeScaleY * (blink.y || 1)\\n );\\n eyeIntersect.rotate(-ctrl.EyeAngle);\\n\\n // ====================== \\u77B3\\u5B54\\n const pupil = new this.scope.Path.Circle(\\n new this.scope.Point(\\n ctrl.HotSpotCenterX * halfEyeWidth + halfEyeWidth,\\n -ctrl.HotSpotCenterY * halfEyeWidth + halfEyeHeight\\n ),\\n this.globalConf.pupilSize / 2\\n );\\n pupil.position = new this.scope.Point(ctrl.EyeCenterX, ctrl.EyeCenterY);\\n\\n // ====================== \\u77B3\\u5B54\\u4E0E\\u773C\\u775B\\u7684\\u4EA4\\u96C6\\n const pupilCliper = eyeIntersect.clone();\\n const pupilIntersect = pupilCliper.intersect(pupil, { insert: true });\\n\\n pupil.remove();\\n pupilCliper.remove();\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u662F\\u6838\\u5FC3\\u7684\\u7ED8\\u5236\\u90E8\\u5206\\uFF08\\u53BB\\u6389\\u4E86\\u975E\\u6838\\u5FC3\\u7684\\u6837\\u5F0F\\u4E4B\\u7C7B\\u7684\\uFF09\\uFF0C\\u6700\\u540E\\u80FD\\u83B7\\u5F97\\u6211\\u4EEC\\u60F3\\u8981\\u7684\\u5B98\\u65B9\\u7684\\u7ED8\\u5236\\u903B\\u8F91\\uFF0C\\u66F4\\u597D\\u7684\\u662F\\u6211\\u4EEC\\u8FD9\\u662F\\u77E2\\u91CF\\u7684\\u7ED8\\u5236\\uFF0C\\u53EF\\u4EE5\\u505A\\u66F4\\u597D\\u73A9\\u7684\\u6548\\u679C\\uFF0C\\u6BD4\\u5982\\u63CF\\u8FB9\\u800C\\u4E0D\\u662F\\u586B\\u5145\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"378px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"50.965250965250966%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABoklEQVQoz62S3VLCMBCFN0lbAggUWiiggCBq/UOh4OgzcAHM8PcmPAXPfNykTEGvvdjJZpN8OWcTOh6PmM/n2O332Gy2HBsb6/U6y//G37XtbofFYoHD4QAyMCL6l4jjGLRjupnkHl/g3D9BNSJIrSG5pjjsKASUlL9qUimosAGn24f3+mEZs9kUtF6t7MR5eQf5NYjhI9zxDO70G9QdgKIWKKdBDCUGUPsG6mMKb/oF+fAMCupQ8SuoWEIyGjFwuQRJBw6DDNjLa3jlMnJhHW6nx9A+BB8Qb2PQMIZioG624Jo9pSt7RjbboGqA5N0AVwwULJ/tmsV8FGU90b5vR3F7B2kUGyeOglsspm0KQkhWLo2LWv0CKBl4UmhvrlahgwCqUEiBvQHE+NNaF9w7HYbw+LJctXahMLxUKOGYPpyUSSkgLl5PDB7Y8gSk81lNMTjL2QGV/bSH5h9ZK88jCGO7dQ1qnoJzwY8luG9UrqQq2x2u89yo4tGoV6PEMpLJ5Ay0N9ZCUKMFEaVhcqr4579W4EdoNLN1u4dfXnpeCkwS/ADR9/+DiwcPFwAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"line style\",\n \"title\": \"line style\",\n \"src\": \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png\",\n \"srcSet\": [\"/static/3404b4ec61e3679a7a9bf3888d8804fd/2c191/line-style.png 259w\", \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png 378w\"],\n \"sizes\": \"(max-width: 378px) 100vw, 378px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"ps: \\u7ED8\\u5236\\u8F6C\\u4E3A\\u77E2\\u91CF svg \\u7684\\u65F6\\u5019\\uFF0C\\u60F3\\u8981\\u4E24\\u4E2A\\u8DEF\\u5F84\\u7684\\u4EA4\\u96C6\\u4F46\\u662F\\u8BA1\\u7B97\\u4F1A\\u5F88\\u590D\\u6742\\uFF0C\\u7B80\\u5355\\u67E5\\u8BE2\\u540E\\u53D1\\u73B0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://paperjs.org/\"\n }, \"paper.js\"), \" \\u5F88\\u5F3A\\u5927\\uFF0C\\u5904\\u7406 svg \\u4EA4\\u96C6\\u5F88\\u65B9\\u4FBF\\uFF0C\\u6700\\u540E\\u5B9E\\u73B0\\u6548\\u679C\\u5F88\\u4E0D\\u9519\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u5BF9\\u4E1A\\u52A1\\u7684\\u542F\\u793A\\uFF1A\\u968F\\u7740\\u8C03\\u7814\\u548C\\u5B9E\\u73B0\\u7684\\u6DF1\\u5165\\uFF0C\\u4E1A\\u52A1\\u7EC6\\u8282\\u7684\\u4E86\\u89E3\\uFF0C\\u627E\\u5230\\u4E86\\u76F8\\u5BF9\\u66F4\\u597D\\u7684\\u5207\\u5165\\u70B9\\uFF0C\\u6240\\u4EE5\\u91CD\\u6784\\u4E5F\\u662F\\u4E3A\\u4E86\\u66F4\\u597D\\u7684\\u5B9E\\u73B0\\u4E1A\\u52A1\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u66F4\\u9AD8\\u7EA7\\u7684\\u6269\\u5C55\\u3002\")), mdx(\"h2\", null, \"\\u4E09\\u3001\\u52A8\\u753B\\u7247\\u6BB5\\u7684\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u4E00\\u8282\\u867D\\u7136\\u662F\\u5728\\u7814\\u7A76\\u52A8\\u753B\\u7247\\u6BB5\\uFF0C\\u4F46\\u662F\\u66F4\\u591A\\u7684\\u662F\\u6839\\u636E\\u52A8\\u753B\\u7247\\u6BB5\\u7684\\u53C2\\u6570\\u91CD\\u6784\\u7ED8\\u5236\\u903B\\u8F91\\u3002\\u4E0B\\u9762\\u5C42\\u7231\\u662F\\u52A8\\u753B\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u518D\\u6DF1\\u5165\\u8C03\\u7814\\u4E0B\\u52A8\\u753B\\u6587\\u4EF6\\uFF0C\\u80FD\\u591F\\u5F97\\u51FA\\u51E0\\u4E2A\\u7ED3\\u8BBA\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"triggerTime_ms \\u662F\\u52A8\\u753B\\u7684\\u65F6\\u95F4\\u4FE1\\u606F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5173\\u952E\\u5E27\\u662F\\u4E00\\u5957\\u8868\\u60C5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728\\u89C4\\u5B9A\\u7684\\u65F6\\u95F4\\u7ED8\\u5236\\u8FD9\\u4E2A\\u8868\\u60C5\\u5373\\u53EF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7ED8\\u5236\\u65F6\\u95F4\\u90FD\\u662F 33 \\u7684\\u500D\\u6570\\uFF0C\\u4E5F\\u5C31\\u662F 30 fps \\u7684\\u52A8\\u753B\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u505A\\u4E00\\u4E2A\\u65F6\\u95F4\\u7BA1\\u7406\\u5668\\uFF0C30fps \\u7684\\u5E27\\u7387\\u8C03\\u7528\\u7ED8\\u5236\\uFF0C\\u5728\\u76F8\\u5E94\\u7684\\u89E6\\u53D1\\u65F6\\u95F4\\u89E6\\u53D1\\u5BF9\\u5E94\\u7684\\u7ED8\\u5236\\u5C31\\u5B9E\\u73B0\\u4E86\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5148\\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 FPS \\u65F6\\u95F4\\u63A7\\u5236\\u5668\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { getUUID } from \\\"./uuid\\\";\\n\\nexport class Ticker {\\n constructor(){\\n this.fps = 30\\n\\n this.then = Date.now()\\n this.interval = 1000 / this.fps;\\n this.globalFrame = 0\\n }\\n runner: number = -1\\n drawers: { [i: string]: () => void } = {}\\n\\n registDrawers = (func: () => void, name?: string): () => void => {\\n const uid = name || getUUID()\\n this.drawers[uid] = func\\n\\n if (this.runner) cancelAnimationFrame(this.runner)\\n this.globalTick();\\n\\n return () => {\\n if (this.drawers[uid]) delete this.drawers[uid]\\n }\\n }\\n\\n afterOneFrame = (func: () => void) => {\\n const uid = getUUID()\\n this.drawers[uid] = () => {\\n func()\\n if (this.drawers[uid]) delete this.drawers[uid]\\n }\\n if (this.runner) cancelAnimationFrame(this.runner)\\n this.globalTick();\\n }\\n\\n pause() {\\n if (this.runner) cancelAnimationFrame(this.runner)\\n }\\n stop(){\\n if (this.runner) cancelAnimationFrame(this.runner)\\n for (const key in this.drawers) {\\n if (Object.prototype.hasOwnProperty.call(this.drawers, key)) {\\n delete this.drawers[key];\\n }\\n }\\n }\\n resume() {\\n if (this.runner) cancelAnimationFrame(this.runner)\\n this.globalTick();\\n }\\n realFPS = 30\\n fps = 30\\n then = Date.now()\\n interval;\\n globalFrame = 0\\n globalTick = () => {\\n let now = Date.now();\\n let delta = now - this.then;\\n if (delta > this.interval) {\\n this.realFPS = 1000 / delta\\n this.globalFrame++\\n this.then = now - (delta % this.interval);\\n\\n for (const key in this.drawers)\\n if (Object.prototype.hasOwnProperty.call(this.drawers, key))\\n this.drawers[key]()\\n }\\n this.runner = requestAnimationFrame(this.globalTick);\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u7F51\\u4E0A\\u4E5F\\u80FD\\u627E\\u5230\\u73B0\\u6210\\u7684\\u9879\\u76EE\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u5C31\\u662F\\u6839\\u636E FPS \\u63A7\\u5236\\u6BCF\\u4E00\\u5E27\\u7684\\u8FD0\\u884C\\u65F6\\u673A\\uFF0C\\u7136\\u540E\\u589E\\u52A0\\u4E00\\u5806\\u8F85\\u52A9\\u673A\\u5236\\u5E2E\\u52A9\\u8FD0\\u884C\\u63A7\\u5236\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u5C31\\u662F\\u904D\\u5386\\u5173\\u952E\\u5E27\\u6309\\u7167\\u987A\\u5E8F\\u6267\\u884C\\u7ED8\\u5236\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u540E\\u7EED\\u8FD8\\u6DFB\\u52A0\\u4E86\\u5E8F\\u5217\\u5E27\\u3001\\u4E8B\\u4EF6\\u7B49\\u903B\\u8F91\\u7684\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E2A\\u4E0D\\u662F\\u6700\\u7EC8\\u7248\\uFF01\\uFF01\\uFF01\\u53EA\\u662F\\u793A\\u610F\\nrunAniKeyFrames(keyframes: AniKeyFrame[]) {\\n // \\u8BA1\\u7B97\\u603B\\u5E27\\u6570\\uFF08\\u5305\\u62EC\\u5173\\u952E\\u5E27\\u548C\\u5E8F\\u5217\\u5E27\\uFF09\\n let totalFrames = -Infinity;\\n keyframes.forEach((keyframe) => {\\n if (keyframe.Name === \\\"ProceduralFaceKeyFrame\\\") {\\n totalFrames = Math.max(\\n totalFrames,\\n msToFrame(keyframe.triggerTime_ms + keyframe.durationTime_ms)\\n );\\n }\\n });\\n\\n // \\u5E27\\u6570\\u5FAA\\u73AF\\u4F53\\n const runFrame = (frameIndex: number) => {\\n // \\u67E5\\u627E\\u5173\\u952E\\u5E27\\u4E2D\\u662F\\u5426\\u6709\\u7B26\\u5408\\u65F6\\u95F4\\u7684\\u5E27\\n const matchFrames = keyframes.filter((frame) =>\\n msIsFrame(frame.triggerTime_ms, frameIndex)\\n );\\n // \\u5982\\u679C\\u6709\\uFF0C\\u90A3\\u4E48\\u64AD\\u653E\\u8FD9\\u4E9B\\u5E27\\n if (matchFrames.length > 0) {\\n matchFrames.forEach((frame) => {\\n if (frame.Name === \\\"ProceduralFaceKeyFrame\\\") {\\n // \\u63A7\\u5236\\u53C2\\u6570\\u7684\\u5E27\\n const controls = applyKeyFrameOnControls(frame, this.globalConf);\\n this.applyControls(controls, undefined, \\\"frame\\\");\\n }\\n });\\n }\\n if (frameIndex >= totalFrames) dispose();\\n };\\n\\n // \\u5F00\\u59CB\\u5FAA\\u73AF\\n let globalFrameSave = this.ticker.globalFrame;\\n dispose = this.ticker.registDrawers(() => {\\n runFrame(this.ticker.globalFrame - globalFrameSave);\\n });\\n runFrame(0);\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u7684\\u8BDD\\u5C31\\u5B9E\\u73B0\\u4E86\\u6700\\u57FA\\u672C\\u7684\\u5173\\u952E\\u5E27\\u64AD\\u653E\\u4E86\\uFF1A\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/ani-5939318b6d5ca5a5441e632d4dffcba2.mp4\"\n }), mdx(\"h3\", null, \"\\u56DB\\u3001\\u5E8F\\u5217\\u5E27\\u52A8\\u753B\"), mdx(\"p\", null, \"\\u5E8F\\u5217\\u5E27\\u76F8\\u6BD4\\u4E4B\\u4E0B\\u66F4\\u7B80\\u5355\\uFF0C\\u56E0\\u4E3A\\u5E8F\\u5217\\u5E27\\u7684\\u52A8\\u753B\\u662F\\u9884\\u8BBE\\u597D\\u7684\\u4E00\\u5E27\\u5E27\\u7684\\u753B\\u9762\\uFF0C\\u53EA\\u8981\\u6BCF\\u4E00\\u5E27\\u5C55\\u793A\\u4E00\\u4E0B\\u52A8\\u753B\\u5373\\u53EF\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/fa9d90baedd117ca41233bea56268455/09c70/sprites.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"64.86486486486486%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC70lEQVQ4y5WSS0yUVxTHrxttYkw0aSUhxriwRmtqdIMkbizu0EA0atr6TFu7aDfF7psYUkWRqoAxkkI0hYlWJOKDD5RShJgiTJrGARSZGTMvlIFx3t9jHvx677UuTLrxJCfnfOfe///733OOyCYy2GmLxFycmUCE0Isg/ud+nZvJLPHoax3VvVehlzq+lrW8mSM5nyAVS5KNp7FSps5FPpfHtmysrEU2LYHpjI5m1sQyLXnm4EhXuWM7FJw8FIrknZys29imrTGZVAYzYyJ4T4slEjT+fot/nniYmBjH7Xbz9NlTotEoSXkmUqkUl39tpfH8eZouXKC+7hRX29owDIMzZ+vpGxzk+s0uamtr8Xg8mnQ6ECSVThObnycej5PL5XS9KF3Mzs2xdPkKhBAsq9hFSdVBlm7YzAcff0Lpge/59IcTrNt/WJ+fPn1GA8PB4DuqLUu2yzR5GcsiwjMzrCot5bPvjrPrSg/HukfYXtdCec1PHOoc5ktXP5WN7YjFS/iloUETeL1eTEmwsLDwRvH0tK5FwmFEdD5GWXk5q6u+4Ktr/XzbYbC7ycXeukscae/lG1cfFQ1XtcJz/xGGJTAh+1UsFrUXCgWSySSRSASRlBPaurWM0h072dfRR40xxoYff6ak+gDVHX9Q2XqXqqbfWP7hR5w6eVITzs7OaiKl8K1K1Ue/348IBkOsLClh99Gv2bjvMOv3HGTlljJWbdzE2urPWVO5l9Xl2xCLFtHc3KzBoVBIK1Kmnq5+MCdnoaLIS7mqjz6fD68c/9T4E3xTz/DKvkzLtfBOjuN7PsWLQIB0JoPaioDMlUI9WRmVOuXq6e+9h0UJSsuVUeD/M9E7MsbQ4zHuDAwy7P6bnj8fMvDXKEOjbnqGHjEs4/0R6YMPaeu6TTAU1kDHcbQ6tTLKbNvW3+Jyt8H1e71cvHaTroEhWjtv4TIecKOvn5bObm4Y92m9bdDS7qKmvhHPxCSFfF4/XQ3k7fpkZDsU4b9NsmdJilh3cAAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"sprites\",\n \"title\": \"sprites\",\n \"src\": \"/static/fa9d90baedd117ca41233bea56268455/0dc48/sprites.png\",\n \"srcSet\": [\"/static/fa9d90baedd117ca41233bea56268455/2c191/sprites.png 259w\", \"/static/fa9d90baedd117ca41233bea56268455/86b01/sprites.png 518w\", \"/static/fa9d90baedd117ca41233bea56268455/0dc48/sprites.png 1035w\", \"/static/fa9d90baedd117ca41233bea56268455/09c70/sprites.png 1290w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\u8FD9\\u4E9B\\u56FE\\u7247\\u5FC5\\u987B\\u63D0\\u524D\\u52A0\\u8F7D\\uFF0C\\u5426\\u5219\\u4E00\\u5E27\\u7684\\u65F6\\u95F4\\u91CC\\u9762\\u52A0\\u8F7D\\u4F1A\\u51FA\\u73B0\\u95EA\\u73B0\\u7684\\u60C5\\u51B5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u6839\\u636E url \\u52A0\\u8F7D\\u4E3A DataUrl\\uFF0C\\u8FD9\\u6837\\u7684\\u8BDD\\u663E\\u793A\\u8017\\u65F6\\u4E0D\\u9700\\u8981\\u7B49\\u5F85\\u7F51\\u7EDC\\nconst loadSpritesByName = async (name: string) => {\\n if (spritesCache[name]) return spritesCache[name];\\n\\n const sprite = sprites.find(s => s.name === name)\\n if (sprite) {\\n const asyncList = new Array(sprite.count).fill(0).map(async (v, i) => fetchAsDataURL(getSpriteUrl(sprite, i)))\\n spritesCache[sprite.name] = await Promise.all(asyncList)\\n return spritesCache[sprite.name]\\n }\\n return null\\n}\\n\")), mdx(\"p\", null, \"\\u7ED8\\u5236\\u56FE\\u50CF\\u7684\\u64CD\\u4F5C\\u5C31\\u4E0D\\u8D34\\u4E86\\uFF0C\\u76F4\\u63A5\\u5C55\\u793A\\u7ED3\\u679C\\uFF1A\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/snow-cd94b2b6d8ff9a00c89eb11603ac3d57.mp4\"\n }), mdx(\"h3\", null, \"\\u5B8C\\u7ED3\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/all-5a5ad555506a9b397998f817cf2bd8d3.mp4\"\n }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.ubug.io/k_vrc\"\n }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u6F14\\u793A\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"e39d5e0b-deda-5587-933d-d45603d8ebfe","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/workpad/workpad-part-8.md","id":"8816fcee-6764-51e5-a1c0-40f9e0fd5a32","parent":{"name":"workpad-part-8","sourceInstanceName":"blog"},"excerpt":"这篇文章分享的是更详细一步步的实现 VSCode 的 textmate，并且解释一些为什么，最后手动引入新的高亮逻辑。 PS: 上一篇相关文章： 🌋 WebIDE 的开发记录其五（monaco-editor + textmate） WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，更详细深入谈谈 Textmate…","fields":{"title":"🌋 WebIDE 的开发记录其八（Textmate详解）","slug":"/blog/workpad-part-8","description":"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。","date":"2022-01-05","redirects":null,"datetime":"2022-01-05 14:18:21","categories":["webide"],"series":"WebIDE 的开发记录","tags":["思考","整理","WorkPad","WebIDE","云开发","Textmate"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","整理","WorkPad","WebIDE","云开发","Textmate"],"theme":null,"slug":"workpad-part-8","date":"2022-01-05 14:18:21"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"workpad-part-8\",\n \"date\": \"2022-01-05 14:18:21\",\n \"title\": \"🌋 WebIDE 的开发记录其八（Textmate详解）\",\n \"author\": \"Ubug\",\n \"description\": \"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。\",\n \"series\": \"WebIDE 的开发记录\",\n \"categories\": [\"webide\"],\n \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"Textmate\"],\n \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u8FD9\\u7BC7\\u6587\\u7AE0\\u5206\\u4EAB\\u7684\\u662F\\u66F4\\u8BE6\\u7EC6\\u4E00\\u6B65\\u6B65\\u7684\\u5B9E\\u73B0 VSCode \\u7684 textmate\\uFF0C\\u5E76\\u4E14\\u89E3\\u91CA\\u4E00\\u4E9B\\u4E3A\\u4EC0\\u4E48\\uFF0C\\u6700\\u540E\\u624B\\u52A8\\u5F15\\u5165\\u65B0\\u7684\\u9AD8\\u4EAE\\u903B\\u8F91\\u3002\"), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u4E0A\\u4E00\\u7BC7\\u76F8\\u5173\\u6587\\u7AE0\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-5\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E94\\uFF08monaco-editor + textmate\\uFF09\"))), mdx(\"p\", null, \"WorkPad \\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u6709\\u610F\\u601D\\u7684\\u9879\\u76EE\\uFF0C\\u4E4B\\u524D\\u62B1\\u7740\\u5206\\u4EAB\\u601D\\u8DEF\\u7684\\u60F3\\u6CD5\\uFF0C\\u7528\\u5F88\\u7B80\\u7565\\u7684\\u6587\\u7AE0\\u8BF4\\u4E86\\u4E0B\\u91CD\\u70B9\\uFF0C\\u4E4B\\u540E\\u975E\\u5E38\\u591A\\u7684\\u4EBA\\u6765\\u8BE2\\u95EE Textmate\\u3001LSP \\u7B49\\u95EE\\u9898\\uFF0C\\u540E\\u9762\\u7528\\u51E0\\u7BC7\\u6587\\u7AE0\\u518D\\u591A\\u8BF4\\u4E00\\u4E9B\\u3002\\u672C\\u6587\\u4E3A\\u7B2C\\u516B\\u7BC7\\u6587\\u7AE0\\uFF0C\\u66F4\\u8BE6\\u7EC6\\u6DF1\\u5165\\u8C08\\u8C08 Textmate \\u7684\\u9AD8\\u4EAE\\u548C\\u6269\\u5C55\\u3002\"), mdx(\"h2\", null, \"\\u3007\\u3001\\u5148\\u634B\\u4E00\\u634B\"), mdx(\"p\", null, \"\\u9700\\u8981\\u5148\\u660E\\u786E\\u7684\\u51E0\\u4E2A\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u9AD8\\u4EAE\\u7684\\u672C\\u8D28\\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5BF9\\u6587\\u672C\\u4E2D\\u7684\\u53D8\\u91CF\\u3001\\u6CE8\\u91CA\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u51FD\\u6570\\u3001\\u4FDD\\u7559\\u5173\\u952E\\u5B57\\u7B49\\u8FDB\\u884C\\u4E0D\\u540C\\u7684\\u6837\\u5F0F\\u7740\\u8272\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E0D\\u540C\\u7684\\u9AD8\\u4EAE\\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u8BCD\\u6CD5\\u3001\\u8BED\\u6CD5\\u5206\\u6790\\u903B\\u8F91\\u4E0D\\u540C\\uFF0C\\u540C\\u6837\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u88AB\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\u5668\\u5206\\u6790\\u51FA\\u6765\\u662F\\u51FD\\u6570\\u8FD8\\u662F\\u53D8\\u91CF\\u53EF\\u80FD\\u4E0D\\u540C\\uFF0C\\u6709\\u4E9B\\u7528\\u7EAF\\u6B63\\u5219\\u6765\\u5339\\u914D\\uFF0C\\u6709\\u4E9B\\u589E\\u52A0\\u4E86\\u903B\\u8F91\\u4E4B\\u7C7B\\u7684\\uFF0C\\u6709\\u4E9B\\u53EA\\u80FD\\u4E00\\u884C\\u4E00\\u884C\\u5339\\u914D\\uFF0C\\u6709\\u4E9B\\u80FD\\u591A\\u884C\\u5339\\u914D\\uFF0C\\u6709\\u4E9B\\u652F\\u6301\\u5D4C\\u5957\\uFF0C\\u6709\\u4E9B\\u4E0D\\u652F\\u6301\\uFF0C\\u89E3\\u6790\\u51FA\\u6765\\u7684\\u7ED3\\u679C\\u4E5F\\u5404\\u6210\\u4F53\\u7CFB\\uFF0C\\u5176\\u4E2D\\u4F7F\\u7528\\u6700\\u5E7F\\u6CDB\\u901A\\u7528\\u7684\\u5C31\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"textmate\"), \"\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u9AD8\\u4EAE\\u4E3A\\u4EC0\\u4E48\\u548C\\u8BED\\u6CD5\\u89E3\\u6790\\u6709\\u5173\\u7CFB\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E00\\u822C\\u6765\\u8BF4\\u8BED\\u6CD5\\u5206\\u6790\\u5668\\u80FD\\u5206\\u6790\\u51FA\\u4E0D\\u540C\\u7684 token\\uFF0C\\u8FD9\\u4E2A token \\u5C31\\u662F\\u62BD\\u8C61\\u51FA\\u6765\\u4E0E\\u8BED\\u8A00\\u65E0\\u5173\\u7684\\u6807\\u8BB0\\uFF0C\\u6BD4\\u5982\\uFF1A\\u5173\\u952E\\u5B57\\u3001\\u6CE8\\u91CA\\u3001\\u5B57\\u7B26\\u4E32\\u7B49\\uFF0C\\u6BCF\\u4E2A token \\u6709\\u4E0D\\u540C\\u7684\\u7740\\u8272\\u903B\\u8F91\\uFF0C\\u989C\\u8272\\u3001\\u80CC\\u666F\\u3001\\u659C\\u4F53\\u3001\\u7C97\\u7EC6\\u7B49\\u3002\"), mdx(\"blockquote\", {\n parentName: \"li\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u8FD9\\u4E2A\\u548C\\u6700\\u8FD1\\u6837\\u5F0F\\u5E93\\u4E2D\\u5F88\\u706B\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Design Tokens\"), \" \\u6982\\u5FF5\\u672C\\u8D28\\u4E0A\\u662F\\u4E00\\u4E2A\\u610F\\u601D\\uFF0C\\u90FD\\u662F\\u7EDF\\u4E00\\u9884\\u8BBE\\u7684\\u57FA\\u7840\\u6837\\u5F0F\\u6807\\u8BB0\\u3002\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"monaco \\u81EA\\u5E26\\u9ED8\\u8BA4\\u7684 token \\u89E3\\u6790\\u5668\\u89E3\\u6790\\u51FA\\uFF1A\"), mdx(\"pre\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-yaml\"\n }, \"identifier operators keyword\\nconstant entity tag\\ninfo-token warn-token error-token\\ndebug-token regexp attribute\\nconstructor namespace type\\npredefined invalid\\n\\nstring .[escape]\\ncomment .[doc]\\ndelimiter .[curly, square, parenthesis, angle, array, bracket]\\nnumber .[hex, octal, binary, float]\\nvariable .[name, value]\\nmeta .[content]\\n\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"monaco \\u81EA\\u5E26\\u4E3B\\u9898\\u5B9A\\u4E49 token \\u7684\\u6837\\u5F0F\\uFF1A\"), mdx(\"pre\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u5B9A\\u4E49 theme \\u7684\\u65B9\\u6CD5\\nmonaco.editor.defineTheme('myCustomTheme', {\\n base: 'vs', // can also be vs-dark or hc-black\\n inherit: true, // can also be false to completely replace the builtin rules\\n rules: [\\n { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },\\n { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },\\n { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above\\n ],\\n colors: {\\n 'editor.foreground': '#000000'\\n }\\n});\\n\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E3A\\u4EC0\\u4E48 monaco \\u80FD\\u591F\\u4F7F\\u7528\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"monaco \\u867D\\u7136\\u5185\\u7F6E\\u7684\\u662F\\u56FA\\u5B9A\\u7684\\u4E00\\u4E2A token \\u89E3\\u6790\\u5668 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Monarch\"), \"\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u5411\\u5916\\u63D0\\u4F9B\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.languages.setTokensProvider\"), \" \\u8BA9\\u5916\\u754C\\u5B9A\\u4E49 token\\uFF0C\\u4E3B\\u9898\\u90E8\\u5206\\u4E5F\\u5E76\\u6CA1\\u6709\\u9650\\u5236 token \\u7684\\u96C6\\u5408\\uFF0C\\u6240\\u4EE5\\u4E5F\\u8BA9\\u6211\\u4EEC\\u79FB\\u690D textmate \\u8BED\\u6CD5\\u548C\\u4E3B\\u9898\\u6210\\u4E3A\\u53EF\\u80FD\\u3002\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E5F\\u5C31\\u662F\\u53EF\\u4EE5\\u8BA9\\u6211\\u4EEC\\u89E3\\u6790\\u51FA token\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u8BA9\\u6211\\u4EEC\\u81EA\\u5B9A\\u4E49 token \\u7684\\u6837\\u5F0F\\uFF0C\\u867D\\u7136\\u5F88\\u6709\\u9650\\u4F46\\u662F\\u591F\\u7528\\u3002\"))), mdx(\"h2\", null, \"\\u4E00\\u3001\", mdx(\"inlineCode\", {\n parentName: \"h2\"\n }, \"vscode-textmate\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"h2\"\n }, \"oniguruma\")), mdx(\"p\", null, \"\\u662F\\u4EC0\\u4E48\\u3001\\u4E3A\\u4EC0\\u4E48\\u9700\\u8981\\u3001\\u4EE5\\u53CA\\u626E\\u6F14\\u4E86\\u4EC0\\u4E48\\u89D2\\u8272\\uFF1F\"), mdx(\"h3\", null, mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"oniguruma\"), \" / \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"vscode-oniguruma\")), mdx(\"p\", null, \"TextMate \\u8BED\\u6CD5\\u4F7F\\u7528\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u89E3\\u6790 token\\uFF0C\\u4F46\\u662F js \\u7684\\u6B63\\u5219\\u5F15\\u64CE\\u4E0E textmate \\u6240\\u4F7F\\u7528\\u7684 oniguruma \\u4E0D\\u540C\\uFF0C\\u6709\\u5F88\\u591A\\u7279\\u6027\\u5DEE\\u5F02\\uFF08JS \\u4E0D\\u652F\\u6301 textmate \\u4E2D\\u4F7F\\u7528\\u5F88\\u591A\\u7684\\u540E\\u884C\\u65AD\\u8A00 lookbehind\\uFF09\\uFF0C\\u4E3A\\u4E86\\u4E00\\u81F4\\u6027\\u548C\\u529F\\u80FD\\u5B8C\\u6574\\u7B49\\u539F\\u56E0\\uFF0C\\u6709\\u5FC5\\u8981\\u4F7F\\u7528\\u539F\\u7248\\u7684 oniguruma \\u6A21\\u5757\\u6765\\u5B9E\\u73B0\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u89E3\\u6790\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F oniguruma \\u662F\\u4E2A c++ \\u6A21\\u5757\\uFF0C\\u5728\\u5404\\u79CD\\u8DE8\\u5E73\\u53F0\\u7684\\u5BA2\\u6237\\u7AEF\\u4E2D\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F js \\u73AF\\u5883\\u4E2D\\u53EA\\u80FD\\u7528 wasm \\u6765\\u9000\\u800C\\u6C42\\u5176\\u6B21\\u4E86\\uFF0C\\u5177\\u4F53\\u5386\\u53F2\\u4EC0\\u4E48\\u7684\\u53EF\\u4EE5\\u770B\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-5\"\n }, \"\\u4E4B\\u524D\\u7684\\u6587\\u7AE0\"), \"\\u3002\"), mdx(\"h3\", null, mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"vscode-textmate\")), mdx(\"p\", null, \"\\u62BD\\u8C61\\u51FA\\u6765\\u7684\\u4E00\\u4E2A textmate \\u8FD0\\u884C\\u903B\\u8F91\\uFF0C\\u8D1F\\u8D23\\u52A0\\u8F7D\\u3001\\u8FD0\\u884C\\u3001\\u7BA1\\u7406 textmate \\u7684\\u89E3\\u6790\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u975E\\u5E38\\u7B80\\u7565\\u7684\\u52A0\\u8F7D\\u548C\\u8FD0\\u884C\\u903B\\u8F91\\u90E8\\u5206\\uFF08\\u5B98\\u65B9\\u4F7F\\u7528 demo \\u6F14\\u793A\\uFF09\\nconst { loadWASM, createOnigScanner, createOnigString } = require('vscode-oniguruma')\\n\\n// oniguruma \\u7684\\u52A0\\u8F7D\\u548C\\u5C01\\u88C5\\nconst wasmBin = fs.readFileSync('path/onig.wasm')).buffer;\\nconst vscodeOnigurumaLib = loadWASM(wasmBin).then(() => ({\\n createOnigScanner,\\n createOnigString\\n}));\\n\\n// -> source.js \\u662F textmate \\u4E2D js \\u7684 scopeName\\uFF0C\\u7B97\\u662F\\u552F\\u4E00\\u6807\\u8BC6 id\\n\\nconst vsctm = require('vscode-textmate');\\n// \\u521B\\u5EFA textmate \\u7684\\u6CE8\\u518C\\u673A\\u6765\\u7BA1\\u7406\\u6574\\u4E2A\\u7684\\u8BED\\u6CD5\\u52A0\\u8F7D\\u548C\\u89E3\\u6790\\nconst registry = new vsctm.Registry({\\n onigLib: vscodeOnigurumaLib,\\n loadGrammar: (scopeName) => {\\n if (scopeName === 'source.js') {\\n // https://github.com/textmate/javascript.tmbundle/blob/master/Syntaxes/JavaScript.plist\\n return readFile('./JavaScript.plist').then(data => vsctm.parseRawGrammar(data.toString()))\\n }\\n console.log(`Unknown scope name: ${scopeName}`);\\n return null;\\n }\\n});\\n// \\u52A0\\u8F7D js \\u7684\\u8BED\\u6CD5\\u6587\\u4EF6\\u5E76\\u89E3\\u6790\\nawait registry.loadGrammar('source.js')\\n\\n// \\u89E3\\u6790\\u7EC6\\u8282\\nconst text = [\\n `function sayHello(name) {`,\\n `\\\\treturn \\\"Hello, \\\" + name;`,\\n `}`\\n];\\nlet ruleStack = vsctm.INITIAL;\\nfor (let i = 0; i < text.length; i++) {\\n const line = text[i];\\n const lineTokens = grammar.tokenizeLine(line, ruleStack);\\n console.log(`\\\\nTokenizing line: ${line}`);\\n for (let j = 0; j < lineTokens.tokens.length; j++) {\\n const token = lineTokens.tokens[j];\\n console.log(` - token from ${token.startIndex} to ${token.endIndex} ` +\\n `(${line.substring(token.startIndex, token.endIndex)}) ` +\\n `with scopes ${token.scopes.join(', ')}`\\n );\\n }\\n ruleStack = lineTokens.ruleStack;\\n}\\n// \\u8F93\\u51FA\\u6BCF\\u4E00\\u884C\\u7684\\u6BCF\\u4E2A\\u5173\\u952E\\u903B\\u8F91\\u7684 token \\u7ED3\\u679C\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4E0A\\u9762\\u8FD9\\u4E24\\u4E2A\\u90E8\\u5206\\u662F monaco-editor \\u80FD\\u591F\\u5B9E\\u73B0 textmate \\u7684\\u5173\\u952E\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u9700\\u8981\\u63D0\\u524D\\u4E86\\u89E3\\u7684\\u70B9\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u867D\\u7136\\u6709\\u5F88\\u591A\\u6210\\u719F\\u7684\\u5728\\u7EBF\\u7F16\\u8F91\\u5668\\u90FD\\u505A\\u8FC7\\u4E86\\uFF0C\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u524D\\u4EBA\\u683D\\u6811\\u73AF\\u8282\\u4E5F\\u8BF4\\u4E86\\u975E\\u5E38\\u591A\\uFF0C\\u57FA\\u672C\\u4E0A\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"oniguruma\"), \" \\u8FD9\\u4E24\\u4E2A\\u4F9D\\u8D56\\u7684\\u7EC4\\u5408\\u6216\\u9B54\\u6539\\uFF0Cvscode \\u76EE\\u524D\\u7528\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-oniguruma\"), \"\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u7248\\u672C\\u5DF2\\u7ECF\\u8FED\\u4EE3\\u4E86\\u5F88\\u591A\\u7248\\u672C\\uFF0C\\u4F46\\u662F\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"5.0\"), \"\\u7684\\u7248\\u672C\\u5F15\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"oniguruma\"), \" \\u7684\\u4E00\\u4E9B \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"breaking change\"), \" \\u5BFC\\u81F4\\u4E4B\\u524D\\u7684\\u903B\\u8F91\\u6CA1\\u6CD5\\u76F4\\u63A5\\u7528\\u4E86\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u9700\\u8981\\u624B\\u52A8\\u5F15\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"4.x\"), \" \\u7248\\u672C\"), \"\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u5728\\u5B89\\u88C5\\u8001\\u7248\\u672C\\u7684\\u65F6\\u5019\\u5BB9\\u6613\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u5230 github \\u4E0A\\u4E0B\\u8F7D\\u5BF9\\u5E94\\u7684 release \\u653E\\u5230\\u9879\\u76EE\\u4E2D\\uFF0C\\u6BD5\\u7ADF\\u8FD9\\u4E2A\\u4E1C\\u897F\\u4E5F\\u6CA1\\u529E\\u6CD5\\u5347\\u7EA7\\uFF0C\\u6211\\u4EEC\\u8FD8\\u4E0D\\u5F97\\u4E0D\\u7528\\u7684\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onigasm\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-oniguruma\"), \" \\u672C\\u8D28\\u4E0A\\u662F\\u540C\\u4E00\\u4E2A\\u4E1C\\u897F\\uFF0C\\u90FD\\u662F\\u4ECE C++ \\u7F16\\u8BD1\\u8FC7\\u6765\\u7684\\uFF0C\\u90FD\\u662F wasm\\uFF0C\\u90FD\\u662F\\u8981\\u66FF\\u6362 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"atom\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"node-oniguruma\"), \"\\uFF0C\\u6240\\u4EE5 API \\u57FA\\u672C\\u76F8\\u540C\\uFF0C\\u8D1F\\u8D23\\u6B63\\u5219\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode\"), \" \\u7684\\u903B\\u8F91\\u8FED\\u4EE3\\u589E\\u52A0\\u4E86\\u5F88\\u591A\\u7684\\u529F\\u80FD\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u5B8C\\u5168\\u590D\\u523B\\uFF0C\\u53EF\\u4EE5\\u53BB\\u7FFB\\u6E90\\u7801\\u3002\\u4F46\\u662F\\u6211\\u8FD9\\u8FB9\\u56E0\\u4E3A\\u4E4B\\u524D\\u53C2\\u8003\\u7684\\u662F theia \\u7684\\u5F88\\u591A\\u903B\\u8F91\\uFF0C\\u76F8\\u5F53\\u4E8E vscode \\u7684\\u65E7\\u903B\\u8F91\\uFF0C\\u5305\\u62EC\\u4E3B\\u9898\\u6587\\u4EF6\\u3001\\u8BED\\u6CD5\\u6587\\u4EF6\\u3001textmate\\u89E3\\u6790\\u903B\\u8F91\\u7B49\\u90FD\\u53EF\\u80FD\\u4E0D\\u662F\\u6700\\u65B0\\u7684\\uFF0C\\u6240\\u4EE5\\u5982\\u679C\\u540C\\u65F6\\u53C2\\u8003 vscode \\u548C theia \\u6216\\u8005\\u8FD9\\u7BC7\\u6587\\u7AE0\\uFF0C\\u5176\\u4E2D\\u6709\\u53EF\\u80FD\\u548C\\u9884\\u671F\\u4E0D\\u592A\\u76F8\\u7B26\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate@4.4.0\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onigasm@2.2.5\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode:dark_plus\"), \" \\u8FD9\\u4E09\\u4E2A\\u7EC4\\u5408\"))), mdx(\"h2\", null, \"\\u4E09\\u3001\\u624B\\u628A\\u624B\\u7684\\u5B9E\\u73B0 monaco-editor \\u4E2D\\u65B0\\u7684\\u9AD8\\u4EAE\\u903B\\u8F91\\u6269\\u5C55\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u505A WorkPad \\u9879\\u76EE\\u7684\\u65F6\\u5019\\u79EF\\u6512\\u7684\\u53EF\\u8FD0\\u884C\\u4EE3\\u7801\\uFF0C\\u5F53\\u65F6\\u53C2\\u8003\\u7684\\u662F theia \\u9879\\u76EE\\uFF0C\\u5927\\u90E8\\u5206\\u903B\\u8F91\\u4ECD\\u7136\\u80FD\\u5728 theia \\u7684\\u9879\\u76EE\\u4E2D\\u627E\\u5230\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u5373\\u4F7F\\u8BF4\\u7684\\u518D\\u600E\\u4E48\\u7B80\\u5355\\uFF0C\\u4F46\\u4E5F\\u4E0D\\u81F3\\u4E8E\\u4E24\\u884C\\u4EE3\\u7801\\u80FD\\u89E3\\u51B3\\u7684\\uFF0C\\u4ECE\\u6D41\\u7A0B\\u4E0A\\u8BF4\\u770B\\uFF0C\\u8FD8\\u662F\\u8981\\u5904\\u7406\\u5F88\\u591A\\u7684\\u8F6C\\u6362\\u624D\\u80FD\\u8DD1\\u901A\\u6574\\u4E2A\\u903B\\u8F91\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7684\\u6D41\\u7A0B\\u4E5F\\u662F\\u6211\\u505A\\u65B0\\u535A\\u5BA2\\u7684\\u65F6\\u5019\\uFF0C\\u60F3\\u8981\\u505A mdx \\u8BED\\u6CD5\\u7F16\\u8F91\\u5668\\u7684\\u8FC7\\u7A0B\\u3002\\u5176\\u4E2D\\u7528\\u5230\\u7684\\u8D44\\u6E90\\u57FA\\u672C\\u4E0A\\u90FD\\u662F vscode \\u5B98\\u65B9\\u7684\\uFF0C\\u6240\\u4EE5\\u6700\\u540E\\u6837\\u5F0F\\u548C vscode \\u4E00\\u5B9A\\u4E5F\\u662F\\u4E00\\u6837\\u7684\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6574\\u4E2A\\u4EE3\\u7801\\u7B97\\u662F\\u4E0D\\u7F3A\\u4EC0\\u4E48\\uFF0C\\u4F46\\u662F\\u548C\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5B9E\\u9645\\u4F7F\\u7528\\u7684\\u5C11\\u4E86\\u5F88\\u591A\\u62BD\\u8C61\\uFF0C\\u4F30\\u8BA1\\u4E5F\\u6CA1\\u529E\\u6CD5\\u76F4\\u63A5\\u8FD0\\u884C\\uFF0C\\u4F46\\u662F\\u5173\\u952E\\u7684\\u4EE3\\u7801\\u90FD\\u5728\\uFF0C\\u6BD4\\u4E4B\\u524D\\u7684\\u6587\\u7AE0\\u4E5F\\u7EC6\\u81F4\\u7684\\u591A\\u3002\\u5982\\u679C\\u4EA4\\u6D41\\u7684\\u4EBA\\u591A\\u7684\\u8BDD\\u518D\\u8003\\u8651\\u5F00\\u6E90\\u51FA\\u6765\\u3002\")), mdx(\"h3\", null, \"1. \\u7F16\\u8F91\\u5668\\u52A0\\u8F7D\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco-editor-core\"), \" \\u800C\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco-editor\"), \"\\uFF0C\\u56E0\\u4E3A\\u8BED\\u6CD5\\u90E8\\u5206\\u6211\\u4EEC\\u9700\\u8981\\u91CD\\u5199\\uFF0C\\u4E0D\\u9700\\u8981\\u81EA\\u5E26\\u7684\\u90A3\\u4E9B worker \\u7B49\\u7528\\u4E0D\\u5230\\u7684\\u903B\\u8F91\\u6240\\u4EE5 core \\u5C31\\u591F\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco\"), \" \\u7684\\u52A0\\u8F7D\\u53D6\\u51B3\\u4E8E\\u5404\\u79CD\\u7F16\\u8BD1\\u73AF\\u5883\\u5BF9\\u4F9D\\u8D56\\u7684\\u52A0\\u8F7D\\uFF0Cwebpack\\u3001webpack-based\\u3001parcel\\u3001vite \\u7B49\\uFF0C\\u4E0D\\u8FC7\\u597D\\u5728 monaco \\u540C\\u65F6\\u652F\\u6301 esm\\u3001amd\\uFF0C\\u52A0\\u8F7D\\u65B9\\u6848\\u53EF\\u4EE5\\u5F88\\u7075\\u6D3B\\u3002\\uFF08\\u63A8\\u8350\\u901A\\u8FC7 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/Microsoft/monaco-editor/blob/main/docs/integrate-amd.md\"\n }, \"AMD\"), \" \\u6765\\u52A0\\u8F7D\\uFF0C\\u4EE3\\u7801\\u4E2D\\u5F15\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"import * as monaco from \\\"monaco-editor/esm/vs/editor/editor.api\\\"\"), \" \\u4F5C\\u4E3A\\u7C7B\\u578B\\u58F0\\u660E\\uFF09\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AMD\"), \" \\u907F\\u514D\\u628A\\u8FD9\\u4E48\\u5927\\u4E00\\u4E2A\\u5305\\u6253\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bundle\"), \" \\u91CC\\u9762\\uFF0C\\u8282\\u7701\\u4E86\\u7F16\\u8BD1\\u7684\\u4F9D\\u8D56\\u3001\\u7F16\\u8BD1\\u65F6\\u95F4\\u7B49\\uFF0C\\u6B64\\u5916\\u7528\\u5916\\u90E8 CDN \\u4E5F\\u66F4\\u7075\\u6D3B\\uFF0C\\u4F60\\u53EF\\u4EE5\\u628A\\u8FD9\\u4E2A\\u66FF\\u6362\\u6210\\u81EA\\u5DF1\\u7684\\u8D44\\u6E90\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const loaderConfig = {\\n paths: {\\n vs: \\\"https://cdn.jsdelivr.net/npm/monaco-editor-core@0.30.1/min/vs\\\"\\n }\\n};\\nexport function monacoLoader(): Promise {\\n return new Promise((resolve, reject) => {\\n const script = document.createElement(\\\"script\\\");\\n script.src = `${loaderConfig.paths.vs}/loader.js`;\\n script.onload = () => configureLoader(resolve, reject);\\n script.onerror = reject;\\n document.body.appendChild(script);\\n });\\n}\\nfunction configureLoader(resolve: (monaco: Monaco) => void, reject: Function) {\\n window.require.config(loaderConfig);\\n window.require([\\\"vs/editor/editor.main\\\"], resolve, reject);\\n}\\nexport default monacoLoader;\\n\")), mdx(\"h3\", null, \"2. \\u7F16\\u8F91\\u5668\\u521D\\u59CB\\u5316\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const monaco = await monacoLoader();\\n(window as any).monaco = monaco;\\n\\nconst defaultModel = monaco.editor.createModel(\\n `# Head1\\\\n\\\\nHello World.`,\\n \\\"markdown\\\",\\n monaco.Uri.parse(\\\"file:///index.md\\\")\\n);\\n\\nconst editor = monaco.editor.create(\\n containerRef.current,\\n {\\n model: defaultModel,\\n automaticLayout: true\\n },\\n {}\\n);\\n\")), mdx(\"h3\", null, \"3. \\u51C6\\u5907\\u597D \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"Oniguruma ASM\"), \" \\u5E76\\u521D\\u59CB\\u5316\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"OnigasmLib\")), mdx(\"p\", null, \"\\u5C31\\u50CF\\u4E0A\\u9762\\u8BF4\\u7684\\uFF0C\\u53EA\\u662F\\u4E00\\u4E2A\\u6B63\\u5219\\u7684\\u8F93\\u5165\\u8F93\\u51FA\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { loadWASM, OnigScanner, OnigString } from \\\"onigasm\\\";\\n\\nconst onigasmPath = \\\"https://cdn.jsdelivr.net/npm/onigasm@2.2.5/lib/onigasm.wasm\\\";\\n\\n// onigasm \\u52A0\\u8F7D\\u5668\\nonigasmPromise = fetch(onigasmPath, { cache: \\\"force-cache\\\" })\\n .then(res => res.arrayBuffer())\\n .then(buffer => loadWASM(buffer))\\n .then(() => new OnigasmLib());\\n\\nexport class OnigasmLib implements IOnigLib {\\n createOnigScanner(sources: string[]) => new OnigScanner(sources)\\n createOnigString(sources: string) => new OnigString(sources)\\n}\\n\")), mdx(\"h3\", null, \"4. \\u51C6\\u5907\\u597D \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"textmate\"), \" \\u9700\\u8981\\u7528\\u5230\\u7684\\u4E3B\\u9898\\u6837\\u5F0F\"), mdx(\"p\", null, \"\\u4E3B\\u9898\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u5C31\\u6BD4\\u8F83\\u641E\\u7B11\\u4E86\\uFF0Cvscode \\u7684\\u4E3B\\u9898 json\\u3001monaco-editor \\u7684\\u4E3B\\u9898\\u3001textmate \\u9700\\u8981\\u7684\\u4E3B\\u9898\\uFF0C\\u8FD9\\u4E09\\u4E2A\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u662F\\u4E0D\\u5B8C\\u5168\\u76F8\\u540C\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u867D\\u7136\\u91C7\\u7528\\u4E86 textmate \\u7684\\u4E3B\\u9898\\uFF0C\\u4F46\\u662F\\u4E5F\\u5E76\\u6CA1\\u6709\\u5728\\u81EA\\u5B9A\\u4E49\\u4E00\\u5957\\u6837\\u5F0F\\uFF0C\\u4ECD\\u7136\\u91C7\\u7528\\u4E86 monaco-editor \\u81EA\\u5DF1\\u7684\\u7740\\u8272\\u4E3B\\u9898\\u89C4\\u5219\\uFF0C\\u6240\\u4EE5 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u91C7\\u7528 textmate \\u8BED\\u6CD5\\u548C rule \\u7B49\\uFF0C\\u6700\\u540E\\u751F\\u6210\\u5BF9\\u5E94 token \\u7684\\u65F6\\u5019\\u989C\\u8272\\u8FD8\\u662F\\u4F7F\\u7528\\u7684\\u662F moanco \\u7684 theme \\u7684\\u989C\\u8272\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5FC5\\u987B\\u8981\\u6709\\u4E2A\\u8F6C\\u6362\\u903B\\u8F91\\uFF0C\\u628A vscode \\u7684\\u4E3B\\u9898\\u8F6C\\u6210 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IRawTheme\"), \" \\u7ED9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"textmate\"), \"\\uFF0C\\u8FD8\\u8981\\u8F6C\\u6210 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IStandaloneThemeData\"), \" \\u7ED9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco\"), \" \\u624D\\u80FD\\u8BA9\\u4E24\\u8FB9\\u90FD\\u80FD\\u7EDF\\u4E00\\u6837\\u5F0F\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"token\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rule\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"settings\"), \" \\u6837\\u5F0F\\u5BF9\\u5E94\\u8D77\\u6765\\u3002\"), mdx(\"p\", null, \"\\u597D\\u5728 vscode \\u7684\\u4E3B\\u9898\\u548C textmate \\u7684\\u5DEE\\u4E0D\\u591A\\uFF0Cmonaco \\u7684\\u4E3B\\u9898 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u4E5F\\u5DF2\\u7ECF\\u7ED9\\u6211\\u4EEC\\u5C01\\u88C5\\u597D\\u4E86\\u8272\\u8868\\u3002\"), mdx(\"p\", null, \"vscode \\u5185\\u7F6E\\u4E3B\\u9898\\u4E2D vs-dark-plus \\u4E00\\u822C\\u7528\\u7684\\u6BD4\\u8F83\\u591A\\uFF0C\\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u627E\\u5230\\u6E90\\u6587\\u4EF6: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/dark_plus.json\"\n }, \"dark-plus\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{ // vscode theme json \\u8282\\u9009\\n \\\"$schema\\\": \\\"vscode://schemas/color-theme\\\",\\n \\\"name\\\": \\\"Dark+ (default dark)\\\",\\n \\\"include\\\": \\\"./dark_vs.json\\\",\\n \\\"tokenColors\\\": [\\n {\\n \\\"name\\\": \\\"Function declarations\\\",\\n \\\"scope\\\": [\\n \\\"entity.name.function\\\",\\n //...\\n ],\\n \\\"settings\\\": { \\\"foreground\\\": \\\"#DCDCAA\\\" }\\n },\\n //...\\n ]\\n}\\n\")), mdx(\"p\", null, \"textmate \\u9700\\u8981\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IRawTheme\"), \" \\u957F\\u8FD9\\u6837\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"/**\\n * A single theme setting.\\n */\\nexport interface IRawThemeSetting {\\n readonly name?: string;\\n readonly scope?: string | string[];\\n readonly settings: {\\n readonly fontStyle?: string;\\n readonly foreground?: string;\\n readonly background?: string;\\n };\\n}\\n/**\\n * A TextMate theme.\\n */\\nexport interface IRawTheme {\\n readonly name?: string;\\n readonly settings: IRawThemeSetting[];\\n}\\n\")), mdx(\"p\", null, \"monaco-editor \\u652F\\u6301\\u7684 theme \\u957F\\u8FD9\\u6837\\uFF0C\\u6700\\u4E3B\\u8981\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"encodedTokensColors\"), \" \\u7684\\u4E00\\u4E2A\\u989C\\u8272\\u6570\\u7EC4\\u6CA1\\u6709\\u5C55\\u793A\\u5728\\u8FD9\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"monaco.editor.defineTheme('myCustomTheme', {\\n base: 'vs', // can also be vs-dark or hc-black\\n inherit: true, // can also be false to completely replace the builtin rules\\n rules: [\\n { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },\\n { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },\\n { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above\\n ],\\n colors: {\\n 'editor.foreground': '#000000'\\n }\\n});\\n\")), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7684\\u903B\\u8F91\\u4E2D\\u5305\\u542B\\u4E86\\u4E3B\\u9898\\u7684 include \\u5F15\\u7528\\uFF0C\\u989C\\u8272\\u8F6C\\u6362\\u7B49\\uFF0C\\u628A vscode \\u7684 json \\u4E3B\\u9898\\u8F6C\\u6362\\u4E3A textmate \\u548C monaco-editor \\u5206\\u522B\\u7684\\u4E3B\\u9898\\u7C7B\\u578B\\uFF0C\\u53EF\\u4EE5\\u7ED9\\u5230\\u8BED\\u6CD5\\u89E3\\u6790\\u548C\\u4E3B\\u9898\\u5E94\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { IStandaloneThemeData, BuiltinTheme, ITokenThemeRule } from \\\"../editor.d\\\";\\nimport { IRawTheme, IRawThemeSetting, Registry } from \\\"./vscode-textmate/main\\\";\\n\\nexport type VSCTheme = {\\n colors: { [i: string]: string };\\n tokenColors: IRawThemeSetting[];\\n include?: string;\\n};\\ntype Includes = { [i: string]: VSCTheme };\\nexport type ThemeMix = {\\n name: string;\\n textmateTheme: IRawTheme;\\n monacoTheme: IStandaloneThemeData;\\n};\\n\\nexport class MonacoThemeRegistry {\\n protected themes = new Map();\\n public getRawTheme = (name: string) => this.themes.get(name)?.textmateTheme;\\n public getMonacoTheme = (name: string) => this.themes.get(name)?.monacoTheme;\\n\\n mergedVSCTheme = (json: VSCTheme, includes?: Includes): VSCTheme => {\\n const after: VSCTheme = {\\n colors: json.colors,\\n tokenColors: json.tokenColors,\\n };\\n if (json.include && includes && includes[json.include]) {\\n const parent = this.mergedVSCTheme(includes[json.include], includes);\\n after.colors = { ...(parent.colors || {}), ...after.colors };\\n after.tokenColors = [...(parent.tokenColors || []), ...after.tokenColors];\\n }\\n return after;\\n };\\n\\n genTextmateTheme = (vsctheme: VSCTheme) => {\\n return { settings: [...vsctheme.tokenColors] };\\n };\\n\\n genMonacoTheme = (\\n vsctheme: VSCTheme,\\n textmateTheme: IRawTheme,\\n monacoBase: BuiltinTheme = \\\"vs-dark\\\"\\n ) => {\\n const monacoTheme: IStandaloneThemeData = {\\n base: monacoBase || \\\"vs\\\",\\n inherit: true,\\n rules: [], // token \\u548C\\u6837\\u5F0F\\u5BF9\\u5E94\\u89C4\\u5219\\n colors: {}, // \\u4E3B\\u8981\\u662F\\u7F16\\u8F91\\u5668\\u6700\\u666E\\u9002\\u7684\\u989C\\u8272\\u8868\\uFF0C\\u524D\\u666F\\u80CC\\u666F\\u4E4B\\u7C7B\\n encodedTokensColors: [], // \\u7F16\\u7801\\u540E\\u7684\\u989C\\u8272\\u89C4\\u5219\\uFF0C\\u5C31\\u662F css \\u4E2D\\u7684 mtk1 \\u4E4B\\u7C7B\\n };\\n\\n // \\u9ED8\\u8BA4\\u7684\\u7F16\\u8F91\\u5668\\u989C\\u8272\\uFF0C\\u5BF9\\u5E94\\u80CC\\u666F\\u3001\\u524D\\u666F\\u3001\\u9009\\u62E9\\u3001\\u9AD8\\u4EAE\\u7B49\\u7B49\\u4E00\\u822C\\u89C4\\u5219\\n if (vsctheme.colors) Object.assign(monacoTheme.colors, vsctheme.colors);\\n // \\u628A textmate \\u7684 IRawThemeSetting \\u8F6C\\u4E3A monaco \\u7684 ITokenThemeRule\\n for (const setting of vsctheme.tokenColors)\\n this.transform(setting, (rule) => monacoTheme.rules.push(rule));\\n\\n // \\u540E\\u9762\\u5C31\\u662F\\u63D0\\u53D6 encodedTokensColors \\u6765\\u5B9E\\u73B0\\u771F\\u5B9E\\u7684 monaco \\u7740\\u8272\\n // \\u8FD9\\u91CC\\u5FC5\\u987B\\u4F7F\\u7528 4.x \\u7684\\u4EE3\\u7801\\uFF0C\\u4E0D\\u7136\\u8FD9\\u91CC\\u4F1A\\u51FA\\u73B0\\u7C7B\\u578B\\u95EE\\u9898\\n const reg = new Registry();\\n reg.setTheme(textmateTheme);\\n monacoTheme.encodedTokensColors = reg.getColorMap();\\n\\n // index 0 has to be set to null for monaco\\n monacoTheme.encodedTokensColors[0] = null!;\\n // index 1 and 2 are the default colors\\n const foreColor = monacoTheme.colors[\\\"editor.foreground\\\"];\\n if (foreColor) monacoTheme.encodedTokensColors[1] = foreColor;\\n const backColor = monacoTheme.colors[\\\"editor.background\\\"];\\n if (backColor) monacoTheme.encodedTokensColors[2] = backColor;\\n return monacoTheme;\\n };\\n\\n public register(\\n givenName: string,\\n vsc: VSCTheme,\\n monacoBase: BuiltinTheme = \\\"vs-dark\\\"\\n ): ThemeMix {\\n if (this.themes.has(givenName)) return this.themes.get(givenName)!;\\n\\n const textmateTheme = this.genTextmateTheme(vsc);\\n const monacoTheme = this.genMonacoTheme(vsc, textmateTheme, monacoBase);\\n\\n const result: ThemeMix = {\\n name: givenName,\\n textmateTheme: this.genTextmateTheme(vsc),\\n monacoTheme: this.genMonacoTheme(vsc, textmateTheme, monacoBase),\\n };\\n this.themes.set(givenName, result);\\n monaco.editor.defineTheme(givenName, monacoTheme);\\n return result;\\n }\\n\\n protected transform(\\n setting: any,\\n acceptor: (rule: ITokenThemeRule) => void\\n ): void {\\n if (typeof setting.scope === \\\"undefined\\\") setting.scope = [\\\"\\\"];\\n if (typeof setting.scope === \\\"string\\\") setting.scope = [setting.scope];\\n\\n for (const scope of setting.scope) {\\n const settings = Object.keys(setting.settings).reduce(\\n (previous: { [key: string]: string }, current) => {\\n let value = setting.settings[current];\\n if (typeof value === \\\"string\\\")\\n value = value.replace(/^\\\\#/, \\\"\\\").slice(0, 6);\\n previous[current] = value;\\n return previous;\\n },\\n {}\\n );\\n acceptor({ ...settings, token: scope });\\n }\\n }\\n}\\nexport const monacoThemeRegistry = new MonacoThemeRegistry();\\n\\nconst darkPlus = monacoThemeRegistry.mergedVSCTheme(\\n require(\\\"./theme/vscode/dark_plus.json\\\"),\\n {\\n \\\"./dark_defaults.json\\\": require(\\\"./theme/vscode/dark_defaults.json\\\"),\\n \\\"./dark_vs.json\\\": require(\\\"./theme/vscode/dark_vs.json\\\"),\\n }\\n);\\nexport const DARK_DEFAULT_THEME = monacoThemeRegistry.register(\\n \\\"dark-plus\\\",\\n darkPlus,\\n \\\"vs-dark\\\"\\n);\\n\")), mdx(\"h3\", null, \"5. \\u51C6\\u5907\\u597D \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"textmate\"), \" \\u9700\\u8981\\u7528\\u5230\\u7684\\u8BED\\u6CD5\\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u8FD9\\u5757\\u662F\\u6700\\u590D\\u6742\\u7684\\uFF0C\\u6D89\\u53CA\\u5230\\u7684\\u903B\\u8F91\\u5F88\\u591A\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u7B97\\u662F\\u6700\\u7B80\\u5355\\u7684\\uFF0C\\u56E0\\u4E3A\\u90FD\\u5DF2\\u7ECF\\u88AB\\u5C01\\u88C5\\u597D\\u4E86\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u7F16\\u8F91\\u5668\\u4E00\\u822C\\u60C5\\u51B5\\u4E0B\\u90FD\\u9700\\u8981\\u52A0\\u8F7D\\u975E\\u5E38\\u591A\\u7684\\u8BED\\u6CD5\\uFF0C\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ts\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"css\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"html\"), \"\\u7B49\\uFF0C\\u9700\\u8981\\u62BD\\u8C61\\u51FA\\u6765\\u7684\\u7EDF\\u4E00\\u914D\\u7F6E\\u3001\\u52A0\\u8F7D\\u7B49\\uFF0C\\u53EF\\u4EE5\\u53EB\\u505A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"provider\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"registery\"), \"\\u7B49\\u6982\\u5FF5\\uFF0C\\u8FD9\\u91CC\\u5148\\u5FFD\\u7565\\uFF0C\\u4EE5\\u4E00\\u4E2A\\u8BED\\u8A00\\u4E3A\\u4F8B\\u5B50\\uFF0C\\u591A\\u8BED\\u8A00\\u7684\\u5C01\\u88C5\\u53EF\\u4EE5\\u81EA\\u5DF1\\u641E\\u3002\")), mdx(\"p\", null, \"textmate \\u7684\\u8BED\\u6CD5\\u662F\\u6709\\u89C4\\u8303\\u6807\\u51C6\\u7684\\uFF0CVSCode \\u7684\\u9879\\u76EE\\u4ED3\\u5E93\\u4E2D\\u76F4\\u63A5\\u901A\\u8FC7\\u811A\\u672C\\u8F6C\\u5316\\u4E3A\\u4E86 json \\u683C\\u5F0F\\u7684\\u7EDF\\u4E00\\u683C\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5230 VSCode \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"markdown\"), \" \\u8BED\\u6CD5\\u6587\\u4EF6\\u4E2D\\u67E5\\u770B \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode/tree/main/extensions/markdown-basics\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"markdown-basics\")), \" \\u7684\\u5B9A\\u4E49\\u3002\"), mdx(\"p\", null, \"\\u4E3B\\u8981\\u662F\\u4E09\\u4E2A\\u6587\\u4EF6\\uFF08\\u8BED\\u6CD5\\u5B9A\\u4E49\\u3001\\u7F16\\u8F91\\u884C\\u4E3A\\u3001\\u8BED\\u8A00\\u5B9A\\u4E49\\uFF09\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/markdown-basics/package.json\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"package.json\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/markdown-basics/syntaxes/markdown.tmLanguage.json\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"markdown.tmLanguage.json\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/markdown-basics/language-configuration.json\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"language-configuration.json\")))), mdx(\"p\", null, \"\\u6839\\u636E\\u4E0A\\u9762\\u83B7\\u5F97\\u7684\\u914D\\u7F6E\\uFF0C\\u5411 monaco \\u589E\\u52A0\\u8BED\\u8A00\\u5B9A\\u4E49\\u548C\\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const languageId = 'markdown'\\nmonaco.languages.register({\\n id: languageId,\\n extensions: [\\\".md\\\", \\\".markdown\\\", \\\".mdown\\\", \\\".mkdn\\\", \\\".mkd\\\", \\\".mdwn\\\", \\\".mdtxt\\\", \\\".mdtext\\\"],\\n aliases: [\\\"Markdown\\\", \\\"markdown\\\"]\\n});\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u662F\\u5728 monaco \\u4E2D\\u5B9A\\u4E49\\u4E86\\u8BED\\u8A00\\u548C\\u8BED\\u8A00\\u7684\\u914D\\u7F6E\\uFF0C\\u8BED\\u6CD5\\u90E8\\u5206\\u4E0B\\u9762\\u7EE7\\u7EED\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { Registry, IRawGrammar, parseRawGrammar } from \\\"./vscode-textmate/main\\\";\\n\\nconst mdScopeName = \\\"text.html.markdown\\\"\\n\\n// \\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u6CE8\\u518C\\u5668\\uFF0C\\u6574\\u4E2A\\u8BED\\u6CD5\\u652F\\u6301\\u7684\\u6838\\u5FC3\\ngrammarRegistry = new Registry({\\n getOnigLib: () => onigasmPromise,\\n theme: DARK_DEFAULT_THEME.textmateTheme,\\n loadGrammar: async (scopeName: string) => {\\n if(scopeName === \\\"text.html.markdown\\\") {\\n return await fetch('./markdown.tmLanguage.json', { cache: \\\"force-cache\\\" }).then(res => res.json())\\n }\\n return undefined;\\n },\\n});\\n\")), mdx(\"p\", null, \"\\u597D\\u50CF\\u8FD9\\u4E2A\\u8BED\\u6CD5\\u90E8\\u5206\\u903B\\u8F91\\u548C monaco \\u6CA1\\u4EC0\\u4E48\\u5173\\u7CFB\\uFF0C\\u90A3\\u662F\\u56E0\\u4E3A\\u6211\\u4EEC\\u8FD8\\u6CA1\\u6709\\u548C monaco \\u8FDE\\u5728\\u4E00\\u8D77\\uFF0C\\u6240\\u4EE5\\u73B0\\u5728\\u80AF\\u5B9A\\u6CA1\\u6CD5\\u8D77\\u4F5C\\u7528\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u8FD9\\u53EA\\u662F\\u4E00\\u4E2A\\u8BED\\u8A00\\u7684\\u5E94\\u7528\\uFF0C\\u5982\\u679C\\u5E94\\u7528\\u6570\\u5341\\u4E2A\\u7684\\u8BDD\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u4E00\\u4E2A\\u7EDF\\u4E00\\u7684\\u8BED\\u8A00\\u6CE8\\u518C\\u673A\\u5236\\u7C7B\\u4F3C\\u7684\\u4E1C\\u897F\\u65B9\\u4FBF\\u5F15\\u7528\")), mdx(\"h3\", null, \"6. \\u5F00\\u542F\\u8BED\\u8A00\\u652F\\u6301\"), mdx(\"p\", null, \"\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.editor.setTokensProvider\"), \" \\u6765\\u94FE\\u63A5 monaco \\u548C textmate\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { INITIAL, StackElement, IGrammar } from \\\"./vscode-textmate/main\\\";\\n\\nexport class TokenizerState implements IState {\\n constructor(public readonly ruleStack: StackElement) {}\\n clone = (): IState => new TokenizerState(this.ruleStack)\\n equals = (other: IState): boolean => (\\n other instanceof TokenizerState &&\\n (other === this || other.ruleStack === this.ruleStack)\\n )\\n}\\n\\n// \\u6FC0\\u6D3B\\u8BED\\u8A00\\u652F\\u6301\\nconst _activatedLanguages = new Set();\\nconst activateLanguage = async (languageId: string): Promise => {\\n // \\u83B7\\u53D6\\u8BED\\u8A00\\u914D\\u7F6E\\n /*{\\n \\\"comments\\\": { \\\"blockComment\\\": [\\\"\\\"] },\\n // symbols used as brackets\\n \\\"brackets\\\": [[\\\"{\\\", \\\"}\\\"], [\\\"[\\\", \\\"]\\\"], [\\\"(\\\", \\\")\\\"]],\\n // symbols that are auto closed when typing\\n \\\"autoClosingPairs\\\": [\\n [\\\"{\\\", \\\"}\\\"], // ---> \\u9700\\u8981\\u624B\\u52A8\\u8F6C\\u4E3A open\\u3001close \\u7684\\u5F62\\u5F0F\\n {\\n \\\"open\\\": \\\"\\\\\\\"\\\",\\n \\\"close\\\": \\\"\\\\\\\"\\\",\\n \\\"notIn\\\": [\\\"string\\\"]\\n },\\n // ...\\n ],\\n // symbols that that can be used to surround a selection\\n \\\"surroundingPairs\\\": [\\n [\\\"{\\\", \\\"}\\\"],\\n // ...\\n ],\\n \\\"folding\\\": {\\n // ...\\n }\\n }\\n */\\n const configuration = await fetch('./language-configuration.json').then(res => res.json())\\n // \\u8F6C\\u6362\\u90E8\\u5206\\u914D\\u7F6E\\uFF08\\u91CD\\u8981\\uFF09\\n raw.autoClosingPairs = raw.autoClosingPairs.map((pair: any) => {\\n if (Array.isArray(pair)) return { open: pair[0], close: pair[1] };\\n return pair;\\n });\\n monaco.languages.setLanguageConfiguration(languageId, configuration);\\n\\n // grammer \\u90E8\\u5206\\n /*\\n {\\n \\\"language\\\": \\\"markdown\\\",\\n \\\"scopeName\\\": \\\"text.html.markdown\\\",\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 IRawGrammar \\u6587\\u4EF6\\n \\\"path\\\": \\\"./syntaxes/markdown.tmLanguage.json\\\",\\n // \\u8FD9\\u91CC\\u662F IGrammarConfiguration \\u914D\\u7F6E\\n \\\"embeddedLanguages\\\": {\\n \\\"meta.embedded.block.html\\\": \\\"html\\\",\\n \\\"source.js\\\": \\\"javascript\\\",\\n \\\"source.css\\\": \\\"css\\\",\\n }\\n }\\n */\\n // \\u6839\\u636E\\u4E4B\\u524D\\u6CE8\\u518C\\u7684\\u8BED\\u8A00\\u83B7\\u5F97\\u8BED\\u8A00 id(number)\\n const encodedLanguageId = monaco.languages.getEncodedLanguageId(languageId);\\n // \\u8F6C\\u6362\\u90E8\\u5206\\u914D\\u7F6E\\uFF08\\u91CD\\u8981\\uFF09\\n if (tmConfig) {\\n const embeddedLanguages = tmConfig.embeddedLanguages || {};\\n for (const key in embeddedLanguages) {\\n if (Object.prototype.hasOwnProperty.call(embeddedLanguages, key)) {\\n const lang = embeddedLanguages[key];\\n embeddedLanguages[key] = monaco.languages.getEncodedLanguageId(lang);\\n if (embeddedLanguages[key] === 0) delete embeddedLanguages[key];\\n }\\n }\\n tmConfig.embeddedLanguages = embeddedLanguages;\\n }\\n\\n const grammar = await grammarRegistry.loadGrammarWithConfiguration(\\n mdScopeName,\\n encodedLanguageId,\\n tmConfig\\n );\\n \\n monaco.languages.setTokensProvider(languageId,\\n {\\n getInitialState: () => new TokenizerState(INITIAL),\\n tokenizeEncoded(line: string, state: TokenizerState): IEncodedLineTokens {\\n // console.log('unencoded token for debug', line);\\n // console.log(grammar.tokenizeLine(line, state.ruleStack));\\n const result = grammar.tokenizeLine2(line, state.ruleStack);\\n return {\\n endState: new TokenizerState(result.ruleStack),\\n tokens: result.tokens\\n };\\n }\\n }\\n );\\n console.info(\\\"\\u5F00\\u542F\\u8BED\\u8A00 \\\" + languageId + \\\"\\u652F\\u6301\\\");\\n};\\n\\nactivateLanguage(languageId)\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u5C31\\u662F\\u5168\\u90E8\\u7684 textmate \\u5E94\\u7528\\uFF0C\\u56E0\\u4E3A\\u8FED\\u4EE3\\u7684\\u53D1\\u5C55\\uFF0C\\u548C\\u76EE\\u524D vscode \\u7684\\u4F7F\\u7528\\u4E0D\\u592A\\u4E00\\u81F4\\u4E86\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u80FD\\u591F\\u5F97\\u5230\\u6211\\u4EEC\\u9700\\u8981\\u7684\\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u62BD\\u8C61\\u548C\\u6279\\u91CF\\u7684\\u6DFB\\u52A0\\u8BED\\u8A00\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u63D0\\u4E86\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"markdown\"), \" \\u7684\\u8BED\\u6CD5 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode/tree/main/extensions/markdown-basics\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"markdown-basics\")), \"\\uFF0C\\u76F8\\u540C\\u76EE\\u5F55\\u4E0B\\u8FD8\\u6709\\u56DB\\u5341\\u591A\\u4E2A\\u5176\\u4ED6\\u5185\\u7F6E\\u7684\\u8BED\\u6CD5\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u8BE6\\u7EC6\\u67E5\\u770B\\u7684\\u8BDD\\u91CC\\u9762\\u4E5F\\u8BF4\\u660E\\u4E86\\u662F\\u5728\\u6E90\\u9879\\u76EE\\u7684 tmLanguage \\u8F6C\\u6362\\u8FC7\\u6765\\u7684\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"This file has been converted from \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/textmate/yaml.tmbundle/blob/master/Syntaxes/YAML.tmLanguage\"\n }, \"https://github.com/textmate/yaml.tmbundle/blob/master/Syntaxes/YAML.tmLanguage\"), \" If you want to provide a fix or improvement, please create a pull request against the original repository. Once accepted there, we are happy to receive an update request.\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u80FD\\u591F\\u4E00\\u4E0B\\u5B50\\u83B7\\u53D6\\u5230\\u8FD9\\u4E9B\\u8BED\\u6CD5\\u89C4\\u5219\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"bat, clojure, coffeescript, cpp, csharp, css, dart, diff, docker, fsharp, go, groovy, handlebars, hlsl, html, ini, ipynb, java, javascript, json, julia, latex, less, log, lua, make, markdown-basics, markdown-math, objective-c, perl, php, powershell, pug, python, r, razor, ruby, rust, scss, shaderlab, shellscript, sql, swift, typescript-basics, vb, xml, yaml\\n\")), mdx(\"p\", null, \"\\u548C\\u4E0A\\u9762\\u7684\\u8BED\\u6CD5\\u903B\\u8F91\\u76F8\\u540C\\uFF0C\\u6211\\u4EEC\\u9700\\u8981\\u7684\\u4E1C\\u897F\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.languages.ILanguageExtensionPoint\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.editor.LanguageConfiguration\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IRawGrammar\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IGrammarConfiguration\"), \" \\u8FD9\\u56DB\\u4E2A\\u4E1C\\u897F\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"package.json\"), \" \\u4E2D\\u90FD\\u80FD\\u770B\\u5230\\u3002\\u4EE5 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bat\"), \" \\u4E3A\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"contributes\\\": {\\n \\\"languages\\\": [\\n {\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 monaco.languages.ILanguageExtensionPoint \\u6587\\u4EF6\\n \\\"id\\\": \\\"markdown\\\",\\n \\\"aliases\\\": [\\\"Markdown\\\", \\\"markdown\\\"],\\n \\\"extensions\\\": [\\\".md\\\", \\\".markdown\\\", /*...*/],\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 monaco.editor.LanguageConfiguration \\u6587\\u4EF6\\n \\\"configuration\\\": \\\"./language-configuration.json\\\"\\n }\\n ],\\n \\\"grammars\\\": [\\n {\\n \\\"language\\\": \\\"markdown\\\",\\n \\\"scopeName\\\": \\\"text.html.markdown\\\",\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 IRawGrammar \\u6587\\u4EF6\\n \\\"path\\\": \\\"./syntaxes/markdown.tmLanguage.json\\\",\\n // \\u8FD9\\u91CC\\u662F IGrammarConfiguration \\u914D\\u7F6E\\uFF08\\u9700\\u8981\\u5C06\\u5B57\\u7B26\\u4E32\\u7684 language \\u8F6C\\u4E3A\\u6570\\u5B57id\\u7684 monaco.languages.getEncodedLanguageId(lang)\\uFF09\\n \\\"embeddedLanguages\\\": {\\n \\\"meta.embedded.block.html\\\": \\\"html\\\",\\n \\\"source.js\\\": \\\"javascript\\\",\\n \\\"source.css\\\": \\\"css\\\",\\n }\\n }\\n ],\\n },\\n}\\n\")), mdx(\"p\", null, \"\\u5176\\u4ED6\\u8BED\\u6CD5\\u6587\\u4EF6\\u57FA\\u672C\\u4E0A\\u90FD\\u662F\\u8FD9\\u4E2A\\u914D\\u7F6E\\u7ED3\\u6784\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\\u628A\\u5168\\u90E8\\u8BED\\u8A00\\u6587\\u4EF6\\u5939\\u62F7\\u5230\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u4E2D\\uFF0C\\u7136\\u540E\\u6574\\u5408\\u4E00\\u4E0B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { IGrammarConfiguration } from \\\"./textmate/vscode-textmate/main\\\";\\n\\ntype GrammarPkg = {\\n contributes: {\\n languages: {\\n id: string;\\n extensions: string[];\\n aliases: string[];\\n configuration: string;\\n }[];\\n grammars: ({\\n language: string;\\n scopeName: string;\\n path: string;\\n } & IGrammarConfiguration)[];\\n };\\n};\\nexport type GrammarInfo = {\\n id: string;\\n languageId: string;\\n scopeName: string;\\n language?: {\\n id: string;\\n extensions: string[];\\n aliases: string[];\\n };\\n tmConfig?: IGrammarConfiguration;\\n tmPath: string;\\n configurationPath: string;\\n};\\n\\nconst basePath = \\\"/libs/grammars\\\";\\n\\nconst grammarsPath: string[] = [\\n \\\"bat\\\",\\n \\\"clojure\\\",\\n \\\"coffeescript\\\",\\n \\\"cpp\\\",\\n \\\"csharp\\\",\\n \\\"css\\\",\\n // ...\\n];\\n\\nconst fixPath = (s: string) => s.replace(/\\\\.\\\\//, \\\"\\\");\\n// \\u4E0D\\u4E25\\u683C\\u7684 json \\u89E3\\u6790\\u9632\\u6B62\\u67D0\\u4E9B\\u8BED\\u6CD5\\u6587\\u4EF6\\u6709\\u6CE8\\u91CA\\u3001\\u591A\\u4E2A\\u9017\\u53F7\\u4E4B\\u7C7B\\u7684\\u95EE\\u9898\\nconst easyJsonDec = async (str: string) => new Function(`return ${str}`)();\\nexport const loadRawJson = async (path: string) => {\\n return await fetch(path, { cache: \\\"force-cache\\\" })\\n .then((res) => res.text())\\n .then((str) => easyJsonDec(str));\\n};\\n\\nexport const prepareGrammars = async () => {\\n // \\u5F02\\u6B65\\u52A0\\u8F7D\\u7684\\u5F62\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u6539\\u6210\\u6253\\u5305\\u3001\\u9884\\u6E32\\u67D3\\u3001\\u9884\\u5904\\u7406\\u7B49\\u63D0\\u524D\\u5408\\u5E76\\u7684\\u624B\\u6BB5\\u907F\\u514D\\u8FD9\\u4E48\\u591A\\u7F51\\u7EDC\\u8BF7\\u6C42\\n const grammarsPkgs: GrammarPkg[] = await Promise.all(\\n grammarsPath.map((p) =>\\n fetch(`${basePath}/${p}/package.json`, { cache: \\\"force-cache\\\" }).then((res) => res.json())\\n )\\n );\\n\\n const grammarsOutput: GrammarInfo[] = [];\\n\\n grammarsPkgs.forEach(async (grammar, i) => {\\n const folder = `${basePath}/${grammarsPath[i]}`;\\n const { grammars, languages } = grammar.contributes;\\n\\n grammars.forEach(async (grammarConf) => {\\n const tm = grammars.find((g) => g.scopeName == grammarConf.scopeName)!;\\n\\n let language =\\n languages.length == 1\\n ? languages[0]\\n : languages.find((g) => g.id == tm.language);\\n\\n if (!language || !language.configuration) return;\\n\\n grammarsOutput.push({\\n id: grammarConf.scopeName,\\n languageId: language.id,\\n scopeName: tm.scopeName,\\n language,\\n tmConfig: tm,\\n tmPath: `${folder}/${fixPath(tm.path)}`,\\n configurationPath: `${folder}/${fixPath(language.configuration)}`,\\n });\\n });\\n });\\n return grammarsOutput;\\n};\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u6211\\u4EEC\\u5C31\\u5B8C\\u6574\\u7684\\u5F15\\u5165\\u4E86\\u5168\\u90E8\\u7684\\u8BED\\u8A00\\u7684\\u6CE8\\u518C\\u4FE1\\u606F\\uFF0C\\u5305\\u62EC\\u8BED\\u6CD5\\u548C\\u8BED\\u6CD5\\u914D\\u7F6E\\u7684\\u6587\\u4EF6\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E4B\\u524D\\u7684\\u52A0\\u8F7D\\u903B\\u8F91\\u4E2D\\u76F4\\u63A5\\u5F15\\u7528\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u81EA\\u5DF1\\u6DFB\\u52A0\\u8BED\\u6CD5\"), mdx(\"p\", null, \"\\u8FD9\\u7BC7\\u6587\\u7AE0\\u7684\\u8BDE\\u751F\\u4E5F\\u662F\\u56E0\\u4E3A\\u6211\\u60F3\\u8981\\u8131\\u79BB\\u4E4B\\u524D\\u7684 workpad \\u5B9E\\u73B0\\u4E00\\u4E2A\\u8F7B\\u91CF\\u7684\\u7F16\\u8F91\\u5668\\u6765\\u5B9E\\u73B0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mdx\"), \"\\uFF0C\\u4E4B\\u524D\\u6CA1\\u6709\\u6DFB\\u52A0\\u8FD9\\u4E2A\\u8BED\\u8A00\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u9700\\u8981\\u65B0\\u589E\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5728 vscode \\u4E2D\\u627E\\u5230\\u54CD\\u5E94\\u7684\\u8BED\\u6CD5\\u6269\\u5C55\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"373px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/d05de4079d8f8d2d5da278caa9974616/cabe9/mdx.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.40926640926641%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBP/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHgjeIaJ//EABcQAAMBAAAAAAAAAAAAAAAAAAECEBL/2gAIAQEAAQUCZMmE3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAIDAQAAAAAAAAAAAAAAAAEQABExcf/aAAgBAQAGPwKjY68mL//EABwQAAMAAQUAAAAAAAAAAAAAAAABEUEhgaGx8P/aAAgBAQABPyF0BkwRfQ34LVx2VBPTJ//aAAwDAQACAAMAAAAQkP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8QV//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQACAgMBAQAAAAAAAAAAAAEAESExUWGRQXH/2gAIAQEAAT8Qxcg0BpOCV5fEAS6n6IaTQGV+O1nX9l4vTBnU/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"mdx\",\n \"title\": \"mdx\",\n \"src\": \"/static/d05de4079d8f8d2d5da278caa9974616/cabe9/mdx.jpg\",\n \"srcSet\": [\"/static/d05de4079d8f8d2d5da278caa9974616/fca29/mdx.jpg 259w\", \"/static/d05de4079d8f8d2d5da278caa9974616/cabe9/mdx.jpg 373w\"],\n \"sizes\": \"(max-width: 373px) 100vw, 373px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5728\\u8BED\\u6CD5\\u6269\\u5C55\\u4E2D\\u627E\\u5230\\u4ED3\\u5E93\\u5730\\u5740\\uFF0C\\u4E00\\u822C\\u90FD\\u662F\\u5F00\\u6E90\\u7684\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"855px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/7a5b47d73598c8d459c7cd5845570ed1/ad316/mdx2.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"47.87644787644788%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHmS3MYw//EABcQAAMBAAAAAAAAAAAAAAAAAAECEDH/2gAIAQEAAQUCZi1MO//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAACAhMf/aAAgBAQAGPwJ0v//EABgQAAIDAAAAAAAAAAAAAAAAAAERECCB/9oACAEBAAE/ISjMYUKm/9oADAMBAAIAAwAAABAQD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABwQAQACAQUAAAAAAAAAAAAAAAEAESEQMXGRof/aAAgBAQABPxBghQLp4I5d7jRqzuABxpguCf/Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"mdx2\",\n \"title\": \"mdx2\",\n \"src\": \"/static/7a5b47d73598c8d459c7cd5845570ed1/ad316/mdx2.jpg\",\n \"srcSet\": [\"/static/7a5b47d73598c8d459c7cd5845570ed1/fca29/mdx2.jpg 259w\", \"/static/7a5b47d73598c8d459c7cd5845570ed1/f4507/mdx2.jpg 518w\", \"/static/7a5b47d73598c8d459c7cd5845570ed1/ad316/mdx2.jpg 855w\"],\n \"sizes\": \"(max-width: 855px) 100vw, 855px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u627E\\u5230\\u7C7B\\u4F3C\\u6587\\u4EF6\\u76EE\\u5F55\\u7684\\u5F00\\u6E90\\u9879\\u76EE\\uFF0C\\u653E\\u5230\\u4E4B\\u524D\\u90A3\\u4E9B\\u8BED\\u6CD5\\u9879\\u76EE\\u65C1\\u8FB9\\uFF0C\\u5F15\\u5165\\u8FDB\\u6765\\u5C31\\u884C\\u4E86\\u3002\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"738px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/e3579ff072577ca018f55763bc10f94f/8fbf5/mdx3.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.02316602316603%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe82Sgf/xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAZEAABBQAAAAAAAAAAAAAAAAABEBEgMUH/2gAIAQEAAT8hD7A2n//aAAwDAQACAAMAAAAQY8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAYEAEBAQEBAAAAAAAAAAAAAAABACExEP/aAAgBAQABPxAgcRi+PJplY5f/2Q==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"mdx3\",\n \"title\": \"mdx3\",\n \"src\": \"/static/e3579ff072577ca018f55763bc10f94f/8fbf5/mdx3.jpg\",\n \"srcSet\": [\"/static/e3579ff072577ca018f55763bc10f94f/fca29/mdx3.jpg 259w\", \"/static/e3579ff072577ca018f55763bc10f94f/f4507/mdx3.jpg 518w\", \"/static/e3579ff072577ca018f55763bc10f94f/8fbf5/mdx3.jpg 738w\"],\n \"sizes\": \"(max-width: 738px) 100vw, 738px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")))), mdx(\"p\", null, \"so easy...\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6211\\u4E4B\\u524D\\u505A\\u7684\\u4E00\\u5927\\u5806\\u8BED\\u8A00\\u4F7F\\u7528\\u7684\\u5E76\\u4E0D\\u662F vscode \\u7684\\uFF0C\\u7136\\u540E\\u5F15\\u7528vscode\\u7684\\u8BED\\u6CD5\\u9879\\u76EE\\u8FDB\\u6765\\u540E\\u6B7B\\u6D3B\\u6CA1\\u529E\\u6CD5\\u6E32\\u67D3\\u51FA\\u6765\\uFF0C\\u7ED3\\u679C\\u53D1\\u73B0\\u8BED\\u6CD5\\u5E76\\u4E0D\\u662F\\u4E25\\u683C\\u552F\\u4E00\\u7684\\uFF0C\\u6BD4\\u5982 js \\u7684\\u9AD8\\u4EAE\\u8BED\\u6CD5 scope \\u6709\\u4E9B\\u53EB \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"source.jsx\"), \"\\uFF0C\\u6709\\u4E9B\\u5374\\u53EB \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"source.js.jsx\"), \"\\uFF0C\\u8FD9\\u6837\\u5C31\\u4F1A\\u5BFC\\u81F4\\u8BED\\u8A00\\u5F15\\u7528\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"missmatch\"), \"\\u3002\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/kvrc/doc.md","id":"b7cc2c7b-b49d-5445-9986-bd800c4695c1","parent":{"name":"doc","sourceInstanceName":"blog"},"excerpt":"想分享的是从脑袋里有一个想法，到调研、遇到瓶颈、找到突破、走弯路、实现还算可以的效果，最后完善到完美。就像大部分的工作一样，每一步都好像都不太顺利，但是最后还是能够把问题解决。 〇、脑袋里甩不掉的想法 💡 周末补了爱死机，一发不可收拾，第一季第二集的三个机器人让我觉得特别有趣，尤其是其中一个表情丰富，于是特别想深入了解。到爱死机的 Wiki 上，知道那个机器是叫 k-vrc 。 又想到之前了解到的一个小机器人： vector/cozmo…","fields":{"title":"🤖 机器人眼睛动画的实现","slug":"/blog/k-vrc-vector-cozmo","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","date":"2021-09-03","redirects":null,"datetime":"2021-09-03 16:34:10","categories":["code"],"series":null,"tags":["整理","思考"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考"],"theme":null,"slug":"k-vrc-vector-cozmo","date":"2021-09-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"k-vrc-vector-cozmo\",\n \"title\": \"🤖 机器人眼睛动画的实现\",\n \"date\": \"2021-09-03 16:34:10\",\n \"author\": \"Ubug\",\n \"description\": \"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u4ECE\\u8111\\u888B\\u91CC\\u6709\\u4E00\\u4E2A\\u60F3\\u6CD5\\uFF0C\\u5230\\u8C03\\u7814\\u3001\\u9047\\u5230\\u74F6\\u9888\\u3001\\u627E\\u5230\\u7A81\\u7834\\u3001\\u8D70\\u5F2F\\u8DEF\\u3001\\u5B9E\\u73B0\\u8FD8\\u7B97\\u53EF\\u4EE5\\u7684\\u6548\\u679C\\uFF0C\\u6700\\u540E\\u5B8C\\u5584\\u5230\\u5B8C\\u7F8E\\u3002\\u5C31\\u50CF\\u5927\\u90E8\\u5206\\u7684\\u5DE5\\u4F5C\\u4E00\\u6837\\uFF0C\\u6BCF\\u4E00\\u6B65\\u90FD\\u597D\\u50CF\\u90FD\\u4E0D\\u592A\\u987A\\u5229\\uFF0C\\u4F46\\u662F\\u6700\\u540E\\u8FD8\\u662F\\u80FD\\u591F\\u628A\\u95EE\\u9898\\u89E3\\u51B3\\u3002\")), mdx(\"hr\", null), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/my-vector-99e5425ec085d7ad0dd149de57843425.mp4\"\n }), mdx(\"h2\", null, \"\\u3007\\u3001\\u8111\\u888B\\u91CC\\u7529\\u4E0D\\u6389\\u7684\\u60F3\\u6CD5 \\uD83D\\uDCA1\"), mdx(\"p\", null, \"\\u5468\\u672B\\u8865\\u4E86\\u7231\\u6B7B\\u673A\\uFF0C\\u4E00\\u53D1\\u4E0D\\u53EF\\u6536\\u62FE\\uFF0C\\u7B2C\\u4E00\\u5B63\\u7B2C\\u4E8C\\u96C6\\u7684\\u4E09\\u4E2A\\u673A\\u5668\\u4EBA\\u8BA9\\u6211\\u89C9\\u5F97\\u7279\\u522B\\u6709\\u8DA3\\uFF0C\\u5C24\\u5176\\u662F\\u5176\\u4E2D\\u4E00\\u4E2A\\u8868\\u60C5\\u4E30\\u5BCC\\uFF0C\\u4E8E\\u662F\\u7279\\u522B\\u60F3\\u6DF1\\u5165\\u4E86\\u89E3\\u3002\\u5230\\u7231\\u6B7B\\u673A\\u7684 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://lovedeathrobots.fandom.com/\"\n }, \"Wiki\"), \" \\u4E0A\\uFF0C\\u77E5\\u9053\\u90A3\\u4E2A\\u673A\\u5668\\u662F\\u53EB \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://lovedeathrobots.fandom.com/wiki/K-VRC\"\n }, \"k-vrc\"), \"\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/k-vrc-8a4c1668ff3cf1476d93131541f81a5a.webp\",\n \"alt\": \"K-VRC\"\n })), mdx(\"p\", null, \"\\u53C8\\u60F3\\u5230\\u4E4B\\u524D\\u4E86\\u89E3\\u5230\\u7684\\u4E00\\u4E2A\\u5C0F\\u673A\\u5668\\u4EBA\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.digitaldreamlabs.com/pages/meet-vector\"\n }, \"vector/cozmo\"), \"\\uFF0C\\u5F88\\u597D\\u73A9\\uFF0C\\u4F46\\u662F\\u4EF7\\u683C\\u3001\\u672C\\u5730\\u5316\\u4E0D\\u592A\\u53CB\\u597D\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/vector-helpful-rain-1a705bca905571975b5bf1dce91702c8.gif\",\n \"alt\": \"vector\"\n })), mdx(\"p\", null, \"\\u53C8\\u53C8\\u60F3\\u5230\\u4E86\\u851A\\u6765\\u6C7D\\u8F66\\u7684 Nomi:\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/item-6-icon-5-0a5263f4176a4e508cb7904ba9dc20b2.webp\",\n \"alt\": \"Nomi\"\n })), mdx(\"p\", null, \"\\u611F\\u89C9\\u8868\\u60C5\\u8FD9\\u4E2A\\u4E1C\\u897F\\u7279\\u522B\\u6709\\u8DA3\\uFF0C\\u81EA\\u5DF1\\u5982\\u679C\\u5B9E\\u73B0\\u4E00\\u4E2A\\u611F\\u89C9\\u4F1A\\u633A\\u6709\\u610F\\u601D\\u7684\\uFF0C\\u5FC3\\u60F3\\u504C\\u5927\\u7684\\u4E92\\u8054\\u7F51\\u4E16\\u754C\\u603B\\u8BE5\\u6709\\u7C7B\\u4F3C\\u7684\\u9879\\u76EE\\u5427\\u3002\"), mdx(\"p\", null, \"\\u7B80\\u5355\\u641C\\u4E86\\u4E00\\u4E0B\\uFF0C\\u5173\\u952E\\u8BCD\\u4ECE \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"robot face\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"robot emotion\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"robot expressions\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"lcd-like robot face\"), \" \\u641C\\u4E86\\u4E00\\u5927\\u5806\\uFF0C\\u53EF\\u4EE5\\u8BF4\\u53EF\\u4EE5\\u7528\\u7684\\u4EE3\\u7801\\u3001\\u77E2\\u91CF\\u56FE\\u7B49\\u4E1C\\u897F\\u6CA1\\u6709\\u80FD\\u8BA9\\u6211\\u76F4\\u63A5\\u4F7F\\u7528\\u7684\\uFF0C\\u6709\\u7684\\u8BDD\\u4E5F\\u662F\\u6781\\u5176\\u7C97\\u7CD9\\uFF0C\\u6240\\u4EE5\\u968F\\u4FBF\\u505A\\u4E00\\u4E2A\\u73A9\\u73A9\\u7684\\u60F3\\u6CD5\\u9010\\u6E10\\u63A5\\u53D7\\u4E86\\u9700\\u8981\\u505A\\u70B9\\u810F\\u6D3B\\u7D2F\\u6D3B\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001 Anki \\u7684 Vector \\u600E\\u4E48\\u5B9E\\u73B0\\u7684\\uFF1F \\u2754\"), mdx(\"p\", null, \"\\u51B3\\u5B9A\\u597D\\u597D\\u8C03\\u7814\\u4E0B anki \\u7684\\u76F8\\u5173\\u65B9\\u6848\\u4F5C\\u4E3A\\u7A81\\u7834\\u53E3\\uFF0C\\u8FD8\\u662F\\u6BD4 Nomi \\u8FD9\\u79CD\\u8D44\\u6599\\u90FD\\u5F88\\u5C11\\u7684\\u9879\\u76EE\\u548C K-VRC \\u90A3\\u79CD\\u7EAF\\u5F71\\u89C6\\u5B9E\\u73B0\\u7684\\u9760\\u8C31\\u70B9\\u7684\\uFF0C\\u6211\\u8FD8\\u771F\\u5C31\\u4E0D\\u4FE1\\u771F\\u5FC3\\u60F3\\u505A\\u7684\\u8FD9\\u4E2A\\u4E1C\\u897F\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\uFF1F\"), mdx(\"p\", null, \"\\u82B1\\u4E86\\u5927\\u529B\\u6C14\\u627E\\u5230\\u7684\\u6700\\u9AD8\\u5206\\u8FA8\\u7387\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/cozmo-b0b4fc7d9fe12c2b3495cfb6ac678a8b.webp\",\n \"alt\": \"cozmo\"\n })), mdx(\"p\", null, \"\\u8868\\u60C5\\u5341\\u5206\\u4E30\\u5BCC\"), mdx(\"p\", null, \"Vector \\u793E\\u533A\\u63D0\\u4E86\\u5F88\\u591A\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://randym32.github.io/Anki.Vector.Documentation/tools/Eye%20animation.html\"\n }, \"https://randym32.github.io/Anki.Vector.Documentation/tools/Eye%20animation.html\"), \" \\u76F8\\u5173\\u5468\\u8FB9\\u77E5\\u8BC6\\uFF0C\\u4EE5\\u4E3A\\u4F1A\\u6709\\u70B9\\u4EC0\\u4E48\\u6709\\u7528\\u7684\\uFF0C\\u4F46\\u662F\\u4E00\\u70B9\\u90FD\\u6CA1\\uFF0C\\u53EA\\u6709\\u4E00\\u4E9B\\u65B0\\u95FB\\u7A3F\\u4E2D\\u7684\\u914D\\u56FE\\u3002\\u627E\\u5230\\u4E86\\u4E00\\u4E9B SDK\\uFF0C\\u4E5F\\u53EA\\u662F\\u53EF\\u4EE5\\u5728\\u5C4F\\u5E55\\u4E0A\\u663E\\u793A\\u4EC0\\u4E48\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/CozmoAnimation-tool2-55324cfc0ca6c7e4da31c99d8a416ca5.webp\",\n \"alt\": null\n }), \"\\n\", mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/VectorAnimation-tool-3430a530998048f91f2eca9cab928025.webp\",\n \"alt\": null\n }), \"\\n\", mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/VectorAnimation-tool2-779253d94a00040f371db371be45dc22.webp\",\n \"alt\": null\n })), mdx(\"p\", null, \"\\u4ECE\\u627E\\u5230\\u7684\\u5DE5\\u7A0B\\u5E08\\u7684\\u56FE\\u4E5F\\u4F50\\u8BC1\\u4E86\\uFF0C\\u786E\\u5B9E\\u7528\\u7684\\u8FD9\\u4E9B\\u5DE5\\u5177\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/3061276-inline-12-meet-cozmo-ankis-pixar-inspired-ai-powered-432edeed213c15e1083250dff822bd95.webp\",\n \"alt\": null\n })), mdx(\"p\", null, \"\\u65E9\\u671F\\u4ED6\\u4EEC\\u7684\\u8BBE\\u8BA1\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/Cozmo-eyes_0-0b4d1017184ab18205eaaa8101b82d5d.webp\",\n \"alt\": null\n })), mdx(\"p\", null, \"\\u624B\\u5199\\u7684\\u5F88\\u591A\\u573A\\u666F\\u548C\\u811A\\u672C\\u8BBE\\u8BA1\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/Cozmo_notes-sketches_0-c4b2483a2a5fa97b8ff786baa10ba4a6.webp\",\n \"alt\": null\n })), mdx(\"p\", null, \"\\u8FD8\\u627E\\u5230\\u4E86\\u4ED6\\u4EEC\\u516C\\u53F8\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"joysticksnsliders\"), \" \\u4E4B\\u7C7B\\u7684 AE \\u5DE5\\u5177\\uFF1F\\u6A21\\u62DF\\u505A\\u7684\\u4E00\\u4E2A\\u6559\\u5B66\\u89C6\\u9891\\uFF0C\\u5B9E\\u73B0\\u52A8\\u6001\\u53EF\\u8C03\\u7684\\u8868\\u60C5\\uFF08\\u548C\\u6211\\u4EEC\\u8981\\u627E\\u7684\\u4EE3\\u7801\\u7EA7\\u5B9E\\u73B0\\u5B8C\\u5168\\u4E0D\\u540C\\uFF09\\uFF1A\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/G-aTsq5yfbncQ3EV-12f44018870f0f863acf393bb3f52445.mp4\"\n }), mdx(\"p\", null, \"\\u7ED3\\u8BBA\\u5C31\\u662F\\uFF1A\"), mdx(\"p\", null, \"\\u4ECE\\u5404\\u79CD\\u62FC\\u51D1\\u7684\\u77E5\\u8BC6\\u788E\\u7247\\u4E2D\\u4E86\\u89E3\\u5230\\uFF0C\\u4ED6\\u4EEC\\u6709\\u6765\\u81EA\\u76AE\\u514B\\u65AF\\u3001\\u68A6\\u5DE5\\u5382\\u4E13\\u95E8\\u7684\\u52A8\\u753B\\u56E2\\u961F\\uFF0C\\u505A\\u4E86\\u4E0A\\u5343\\u4E2A\\u9884\\u8BBE\\u573A\\u666F\\uFF08\\u770B\\u5230\\u8FD9\\u4E2A\\u6587\\u5B57\\u7684\\u65F6\\u5019\\u89C9\\u5F97\\u6709\\u70B9\\u5938\\u5F20\\uFF0C\\u4F46\\u662F\\u771F\\u5B9E\\u770B\\u5230 1186 \\u4E2A\\u52A8\\u753B\\u6587\\u4EF6\\u7684\\u65F6\\u5019\\uFF0C\\u5185\\u5FC3\\u53EA\\u6709\\u656C\\u4EF0\\u4E86\\uFF09\\uFF0C\\u5404\\u79CD\\u5404\\u6837\\u7684\\u8868\\u60C5\\u3002\\u4E5F\\u5C31\\u662F\\u8BF4\\u90A3\\u4E9B\\u975E\\u5E38\\u597D\\u73A9\\u7684\\u8868\\u60C5\\u548C\\u53CD\\u5E94\\uFF0C\\u5176\\u5B9E\\u90FD\\u662F\\u9884\\u8BBE\\u7684\\u6574\\u5957\\u52A8\\u4F5C\\uFF0C\\u786E\\u5B9E\\u6709 AI \\u76F8\\u5173\\u7684\\u4E1C\\u897F\\u89E6\\u53D1\\u8FD9\\u4E9B\\u4E00\\u4E32\\u7684\\u52A8\\u4F5C\\u3002\\u5F00\\u53D1\\u52A8\\u753B\\u7528\\u7684\\u662F maya\\uFF0C\\u6709\\u4E13\\u95E8\\u7684 GUI \\u7684\\u8868\\u60C5\\u63A7\\u5236\\u5DE5\\u5177\\u3002\"), mdx(\"p\", null, \"Vector \\u7684\\u8868\\u60C5\\u4E0D\\u662F\\u968F\\u673A\\u7684\\uFF0C\\u4E5F\\u4E0D\\u662F\\u7B80\\u5355\\u51E0\\u4E2A\\u60C5\\u7EEA\\u8868\\u60C5\\u7684\\u52A0\\u6743\\u7EC4\\u5408\\uFF0C\\u662F\\u6839\\u636E\\u5404\\u79CD\\u6545\\u4E8B\\u60C5\\u8282\\u7F16\\u6392\\u5B9E\\u73B0\\u7684\\u4E00\\u4E2A\\u4E2A\\u8868\\u60C5\\u5E27\\uFF0C\\u624B\\u52A8\\u590D\\u523B\\u8FD9\\u4E2A\\u80FD\\u529B\\u7684\\u6210\\u672C\\u5B9E\\u5728\\u662F\\u592A\\u9AD8\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u90FD\\u662F\\u6211\\u5728\\u611F\\u5174\\u8DA3\\u8C03\\u7814\\u8FC7\\u7A0B\\u4E2D\\u67E5\\u5230\\u7684\\u8D44\\u6599\\u5565\\u7684\\uFF0C\\u5F88\\u6709\\u9650\\uFF0C\\u4E0D\\u8FC7\\u5DF2\\u7ECF\\u5F00\\u59CB\\u60F3\\u4E0A\\u624B\\u505A\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u81EA\\u5DF1\\u539F\\u6765\\u7684\\u601D\\u8DEF \\uD83E\\uDD14\"), mdx(\"p\", null, \"\\u5728\\u6CA1\\u6DF1\\u5165\\u4E86\\u89E3\\u4E4B\\u524D\\uFF0C\\u6211\\u7684\\u8BA1\\u5212\\u662F\\u5927\\u6982\\u505A\\u4E00\\u4E2A\\u773C\\u775B\\u7684\\u5F62\\u72B6\\uFF0C\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u60C5\\u7EEA\\u5B9E\\u73B0\\u4E0D\\u540C\\u7684\\u5F62\\u72B6\\uFF0C\\u7136\\u540E\\u624B\\u52A8\\u5207\\u6362\\u60C5\\u7EEA\\u5373\\u53EF\\u5B9E\\u73B0\\u4E0D\\u540C\\u7684\\u8868\\u60C5\\uFF0C\\u9876\\u591A\\u5728\\u5207\\u6362\\u7684\\u65F6\\u5019\\u505A\\u70B9\\u8865\\u95F4\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u7B80\\u5355\\u641C\\u4E86\\u4E0B\\uFF0C\\u5F3A\\u70C8\\u5EFA\\u8BAE\\u770B\\u4E0B\\u8FD9\\u4E2A\\u7F51\\u9875\\uFF0C\\u80FD\\u591F\\u544A\\u8BC9\\u4F60\\u634F\\u4EBA\\u7684\\u4E1A\\u52A1\\u80FD\\u591F\\u505A\\u7684\\u591A\\u8BE6\\u7EC6\\uFF0818y+\\uFF09\\uFF1A\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://pochi.wiki.fc2.com/wiki/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B%2F%E5%AE%B9%E5%A7%BF%E3%82%BF%E3%83%96\"\n }, \"http://pochi.wiki.fc2.com/wiki/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B%2F%E5%AE%B9%E5%A7%BF%E3%82%BF%E3%83%96\")), mdx(\"p\", null, \"\\u91CC\\u9762\\u7684\\u773C\\u775B\\u5F62\\u72B6\\u4E0D\\u8003\\u8651\\u65B9\\u5411\\u548C\\u7728\\u773C\\uFF0C\\u6709 25 \\u79CD\\u4E2A\\u793A\\u4F8B\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/efb3a59f16c9b0351f76add68eef496f-a9c155e85cb3dcb5eaffe5f7ce30a814.webp\",\n \"alt\": null\n })), mdx(\"p\", null, \"\\u5634\\u578B\\u7684\\u533A\\u522B\\u751A\\u81F3\\u8FBE\\u5230\\u4E86 80 \\u79CD\\u3002\"), mdx(\"p\", null, \"\\u5982\\u679C\\u8981\\u5B9E\\u73B0\\u6BD4\\u8F83\\u4E30\\u5BCC\\u7684\\u8868\\u60C5\\uFF0C\\u8FBE\\u5230\\u7075\\u52A8\\u7684\\u611F\\u89C9\\uFF0C\\u80FD\\u591F\\u9884\\u6599\\u5230\\u80AF\\u5B9A\\u6709\\u592A\\u591A\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dirty work\"), \" \\u8981\\u505A\\u4E86\\uFF0C\\u66F4\\u4F55\\u51B5\\u6211\\u4E5F\\u4E0D\\u662F\\u5F88\\u61C2\\u753B\\u753B\\uFF0C\\u4F5C\\u4E3A\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"side project\"), \"\\uFF0C\\u5982\\u679C\\u8FD9\\u4E48\\u505A\\u7684\\u8BDD\\uFF0C\\u5927\\u6982\\u7387\\u662F\\u8981\\u70C2\\u5C3E\\uFF0C\\u548C\\u6211\\u90A3\\u4E9B\\u864E\\u5934\\u86C7\\u5C3E\\u7684\\u9879\\u76EE\\u4E00\\u8D77\\u843D\\u7070\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8C03\\u7814\\u4E86\\u633A\\u4E45\\uFF0C\\u4E5F\\u4E00\\u76F4\\u6CA1\\u65B0\\u5EFA\\u6587\\u4EF6\\u5939\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5B98\\u65B9\\u5F00\\u6E90\\uFF1F\\uFF01 \\uD83D\\uDCBD\"), mdx(\"p\", null, \"\\u4E4B\\u524D Vector \\u8FD9\\u4E2A\\u9879\\u76EE\\u662FAnki \\u8FD9\\u4E2A\\u516C\\u53F8\\u4F17\\u7B79\\u505A\\u7684\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E2A\\u516C\\u53F8\\u6700\\u8FD1\\u88AB DDL(digital-dream-labs) \\u516C\\u53F8\\u6536\\u8D2D\\u3002\\u7FFB\\u4E86\\u4E0B\\u4ED6\\u4EEC\\u7684 Twitter\\uFF0C\\u672C\\u6765\\u60F3\\u627E\\u627E\\u6709\\u4EC0\\u4E48\\u9AD8\\u6E05\\u5927\\u56FE\\u4E4B\\u7C7B\\u7684\\u53C2\\u8003\\uFF0C\\u4F46\\u662F\\u610F\\u5916\\u770B\\u5230\\u4ED6\\u4EEC\\u73B0\\u5728\\u4ECD\\u7136\\u5728\\u4F17\\u7B79\\u7684\\u9875\\u9762\\uFF0C\\u7136\\u540E\\u5728\\u6700\\u8FD1\\u7684\\u66F4\\u65B0\\u4E2D\\u53D1\\u73B0\\u4E86\\u4E00\\u4E2A\\u5F88\\u91CD\\u8981\\u7684\\u4FE1\\u606F\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/163043-17ccf50e5e8617dbbceb9af75ce7a908.webp\",\n \"alt\": null\n })), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.kickstarter.com/projects/digitaldreamlabs/vector-unleashed/posts\"\n }, \"https://www.kickstarter.com/projects/digitaldreamlabs/vector-unleashed/posts\")), mdx(\"p\", null, \"\\u867D\\u7136\\u662F\\u4EC5\\u652F\\u6301\\u8005\\u53EF\\u770B\\uFF0C\\u4F46\\u662F\\u7B80\\u5355\\u7684\\u641C\\u4E00\\u4E0B\\u53D1\\u73B0\\u5185\\u5BB9\\u88AB\\u653E\\u5230\\u4E86 GitHub \\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u771F\\u662F\\u975E\\u5E38\\u96BE\\u5F97\\uFF0C\\u7FFB\\u4E86\\u4E00\\u4E0B\\u5C45\\u7136\\u662F\\u4E00\\u4E9B\\u539F\\u751F\\u7684\\u52A8\\u753B\\u6587\\u4EF6\\uFF1A\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/digital-dream-labs/vector-animations-raw\"\n }, \"https://github.com/digital-dream-labs/vector-animations-raw\")), mdx(\"p\", null, \"\\u5305\\u62EC\\u6574\\u4E2A\\u7EC4\\u7EC7\\u4E0B\\u9762\\u7684\\u5F00\\u6E90\\u9879\\u76EE\\uFF0C\\u5305\\u62EC build \\u7684\\u5F88\\u591A\\u4EE3\\u7801\\u90FD\\u5F00\\u4E86\\u6E90\\uFF0C\\u751A\\u81F3\\u6709\\u8BE6\\u7EC6\\u7684\\u5B89\\u88C5\\u6559\\u7A0B\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u63A5\\u4E0B\\u6765\\u7684\\u5B9E\\u73B0\\u8DEF\\u7EBF \\uD83D\\uDCAD\"), mdx(\"p\", null, \"\\u5982\\u679C\\u60F3\\u8981\\u590D\\u523B\\u5B8C\\u6574\\u7684\\u673A\\u5668\\u4EBA\\u903B\\u8F91\\uFF0C\\u5B9E\\u8BDD\\u5B9E\\u8BDD\\u4E5F\\u786E\\u5B9E\\u4E0D\\u53EF\\u80FD\\u3002\\u4F46\\u662F\\u6211\\u53EA\\u662F\\u60F3\\u5B9E\\u73B0\\u600E\\u4E48\\u753B\\u51FA\\u6765\\u8FD9\\u4E9B\\uFF0C\\u6240\\u4EE5\\u4E0D\\u8981\\u6C42\\u592A\\u591A\\u3002\"), mdx(\"h3\", null, \"1 \\u7C97\\u7565\"), mdx(\"p\", null, \"\\u7FFB\\u4E86\\u7FFB\\u8FD9\\u4E2A\\u52A8\\u753B\\u8D44\\u6E90\\u4ED3\\u5E93\\uFF0C\\u627E\\u5230\\u4E86\\u4E00\\u4E9B\\u80FD\\u5F00\\u59CB\\u5DE5\\u4F5C\\u7684\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u867D\\u7136\\u662F\\u7528 maya \\u624D\\u80FD\\u4E0A\\u624B\\u7684\\u9879\\u76EE\\uFF0C\\u4F46\\u662F\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u63A7\\u5236\\u6570\\u636E\\uFF0C\\u5927\\u90E8\\u5206\\u662F\\u52A8\\u753B\\u90E8\\u5206\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u91CC\\u9762\\u7FFB\\u5230\\u4E86\\u4E00\\u4E9B pose.json \\u7684\\u6587\\u4EF6\\uFF0C\\u5305\\u542B\\u4E86\\u63A7\\u5236\\u53C2\\u6570\\u548C\\u9884\\u89C8\\u56FE\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5927\\u6982 34 \\u4E2A\\u8868\\u60C5\\u76F8\\u5173\\u7684 pose\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u91CC\\u9762\\u7684\\u63A7\\u5236\\u53C2\\u6570\\u5305\\u62EC\\u4E86\\uFF1A\\u4F4D\\u79FB\\u3001\\u7F29\\u653E\\u3001\\u53D1\\u5149\\u3001\\u65CB\\u8F6C\\u3001\\u4EAE\\u5EA6\\u3001\\u5706\\u89D2\\u7B49\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E00\\u4E9B\\u6BD4\\u8F83\\u7279\\u522B\\u7684\\u6548\\u679C\\u76F4\\u63A5\\u7528\\u7684\\u5E8F\\u5217\\u5E27\\u505A\\u7684\")), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"787px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/29b7a210dca8b777ff8b2bfe92eb0250/61f6d/face-list.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"40.15444015444015%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAdYZqB//xAAYEAADAQEAAAAAAAAAAAAAAAAAAREDEv/aAAgBAQABBQKsrOdD/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAIDAQAAAAAAAAAAAAAAAACRAQIyQf/aAAgBAQAGPwLVmalnWf/EAB0QAAECBwAAAAAAAAAAAAAAAAAB8BEhMWHB0eH/2gAIAQEAAT8hgo5W5PytjfR//9oADAMBAAIAAwAAABBz/wD/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAwEBPxCD/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QV//EABkQAQADAQEAAAAAAAAAAAAAAAEAESExof/aAAgBAQABPxAeLMbVQFALb6EFZvM//9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"face list\",\n \"title\": \"face list\",\n \"src\": \"/static/29b7a210dca8b777ff8b2bfe92eb0250/61f6d/face-list.jpg\",\n \"srcSet\": [\"/static/29b7a210dca8b777ff8b2bfe92eb0250/fca29/face-list.jpg 259w\", \"/static/29b7a210dca8b777ff8b2bfe92eb0250/f4507/face-list.jpg 518w\", \"/static/29b7a210dca8b777ff8b2bfe92eb0250/61f6d/face-list.jpg 787w\"],\n \"sizes\": \"(max-width: 787px) 100vw, 787px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u6709\\u4E86\\u8FD9\\u4E9B\\u63A7\\u5236\\u5E27\\u4E4B\\u540E\\u5927\\u6982\\u4E86\\u89E3\\u4E86\\u600E\\u4E48\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u8FD8\\u4E0D\\u592A\\u6E05\\u695A\\u8FD9\\u4E9B\\u53C2\\u6570\\u600E\\u4E48\\u62FC\\u5728\\u4E00\\u8D77\\uFF0C\\u6BD4\\u5982\\u773C\\u775B\\u591A\\u5927\\u3001\\u539F\\u59CB\\u4F4D\\u7F6E\\u3001\\u5E94\\u7528\\u5728\\u4EC0\\u4E48\\u5F62\\u72B6\\u4E0A\\u4E4B\\u7C7B\\u3002\"), mdx(\"h3\", null, \"2 \\u6E32\\u67D3\\u770B\\u770B\"), mdx(\"p\", null, \"\\u5B98\\u65B9\\u6559\\u7A0B\\u56E0\\u4E3A\\u662F\\u7EAF\\u82F1\\u6587\\u7684\\uFF0C\\u800C\\u4E14\\u770B\\u5F97\\u51FA\\u6765\\u6574\\u4E2A\\u9879\\u76EE\\u7ECF\\u5386\\u4E86\\u5F88\\u591A\\u7684\\u201C\\u53D8\\u6545\\u201D\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maya 2016\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maya 2018\"), \" \\u8F6F\\u4EF6\\u90FD\\u6DF7\\u7740\\u7528\\u3002\"), mdx(\"p\", null, \"\\u5728 maya 2018 \\u6253\\u5F00\\u5931\\u8D25\\u540E\\u53C8\\u88C5\\u4E86 maya 2016 \\uFF0C\\u6309\\u7167\\u5B89\\u88C5\\u6D41\\u7A0B\\u88C5\\u4E86\\u63D2\\u4EF6\\uFF0C\\u4FEE\\u6539 env \\u6587\\u4EF6\\uFF0C\\u6700\\u540E\\u80FD\\u591F\\u6253\\u5F00\\u4E86\\u9879\\u76EE\\u7684\\u573A\\u666F\\uFF0C\\u80FD\\u591F\\u9884\\u89C8\\u5230\\u4ED6\\u4EEC\\u7684\\u9879\\u76EE\\u4E86\\uFF1A\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/maya-preview-1-1758c674e4555d6340e012aec87000c6.mp4\"\n }), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/maya-preview-2-288d9d577e65cf57d08959634fe42893.mp4\"\n }), mdx(\"p\", null, \"\\u7C97\\u7565\\u770B\\u4E86\\u4E0B\\uFF0C\\u56E0\\u4E3A\\u5BF9 maya \\u7528\\u7684\\u4E0D\\u719F\\u6089\\uFF0C\\u6240\\u4EE5\\u4E86\\u89E3\\u5230\\u7684\\u4E5F\\u5F88\\u6709\\u9650\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/13000978290a41ea42408c9a23efc30e/cc6c6/maya.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"38.996138996138995%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB2UlEQVQoz1WS0W/SUBTGeSHZGEiBllEKbbG00JbBhNGywgDHxlCzuSWamRkXTTTGxP//9ee5vCw+fLm3yTm/ft89J3f35SdXd0+s3j/y9vaJxeYDpWKRcllD1w0ajSaW1ca2XRznRW3XwWy1MOrHVLQqRenJ5/Pk7p//cvv1D5cP39l8+sXFzQOaplGt1gRm0mrZuB0Prxvg+6LAx496eGGA47+m6bTQ68bewOFhgdzu8zP3337z7vEH649PAryjJjBd18VZi06/T3D6hnA8IZIzGg2Jkik9+faGI2y/S8MyxWWFo6MSueU843pzydXlmnQ6IZulGEZdZNC2HbrSFE7OGCQJwyRleDZheJ4RTRN8gbpxjNk0qVYqEluAi4slm+0Nu92O1XpNls3/A/qnp9I85WQ2YzQ7ZyT30XxOnM4IJlM6gwGm1XwBXqzWbAW4WCxI04S5FNdq+j6yej8vHtAXJwNxdHImGo/F4bnEVg7HOL3ePrImkQuFIrnN9ZbVcimwlESKsiyjIn9TMmUoarqe5xP0QsJ+RBiJTmKCOMT1PSy3LZOuUyq94uDgQIYiUZUrBVPQqURSK6AK1NqYprWHdtSkvS5dkTpdT2C2Tf24gVZW7gr7tfkHn67rVfWK6owAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"maya\",\n \"title\": \"maya\",\n \"src\": \"/static/13000978290a41ea42408c9a23efc30e/0dc48/maya.png\",\n \"srcSet\": [\"/static/13000978290a41ea42408c9a23efc30e/2c191/maya.png 259w\", \"/static/13000978290a41ea42408c9a23efc30e/86b01/maya.png 518w\", \"/static/13000978290a41ea42408c9a23efc30e/0dc48/maya.png 1035w\", \"/static/13000978290a41ea42408c9a23efc30e/cc6c6/maya.png 1371w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u6574\\u4E2A maya \\u8D1F\\u8D23\\u5F88\\u591A\\u573A\\u666F\\u7684\\u8BBE\\u8BA1\\u548C\\u5BFC\\u51FA\\uFF0C\\u63A7\\u5236\\u4E86\\u52A8\\u4F5C\\u53C2\\u6570\\u4EC0\\u4E48\\u7684\\u3002\\u52A8\\u753B\\u5E08\\u8BBE\\u8BA1\\u4E86\\u811A\\u672C\\u548C\\u573A\\u666F\\uFF0C\\u7136\\u540E\\u5728 maya \\u91CC\\u9762\\u5236\\u4F5C\\u52A8\\u753B\\uFF0C\\u7136\\u540E\\u5BFC\\u51FA\\u63A7\\u5236\\u53C2\\u6570\\uFF0C\\u6700\\u540E Robot \\u673A\\u5668\\u672C\\u4F53\\u6839\\u636E\\u53C2\\u6570\\u590D\\u73B0\\u884C\\u4E3A\\u548C\\u663E\\u793A\\u3002\"), mdx(\"p\", null, \"\\u773C\\u775B\\u7684 LED \\u90E8\\u4EF6\\u6BD4\\u8F83\\u7279\\u6B8A\\uFF0C\\u867D\\u7136\\u5728 maya \\u4E2D\\u770B\\u5F97\\u5230\\uFF0C\\u4F46\\u662F\\u548C\\u5B9E\\u9645\\u7684\\u753B\\u9762\\u4E0D\\u540C\\uFF0C\\u9700\\u8981\\u989D\\u5916\\u7684\\u4EE3\\u7801\\u624D\\u80FD\\u6E32\\u67D3\\u5230\\u5C4F\\u5E55\\u4E0A\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E5F\\u5C31\\u662F\\u4E0A\\u9762\\u90A3\\u4E9B\\u773C\\u775B\\u7684\\u66F2\\u7EBF\\u53EA\\u662F\\u53C2\\u6570\\u793A\\u610F\\u3002\")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u80FD\\u770B\\u5230\\u6709\\u54EA\\u4E9B\\u63A7\\u5236\\u5143\\u7D20\\uFF0C\\u5305\\u62EC\\uFF1A\\u773C\\u775B\\u3001\\u4E0A\\u4E0B\\u773C\\u7751\\u3001\\u56DB\\u4E2A\\u5706\\u89D2\\u3001\\u77B3\\u5B54\\uFF0C\\u8FD9\\u4E9B\\u5143\\u7D20\\u90FD\\u80FD\\u63A7\\u5236\\u4F4D\\u79FB\\u3001\\u7F29\\u653E\\u3001\\u65CB\\u8F6C\\u7B49\\u57FA\\u672C\\u53C2\\u6570\\uFF0C\\u5F62\\u6210\\u6700\\u540E\\u6548\\u679C\\u3002\"), mdx(\"h3\", null, \"3 \\u6362\\u4E2A\\u4E3B\\u573A\"), mdx(\"p\", null, \"maya \\u4E0D\\u4F1A\\u7528\\uFF0C\\u597D\\u5728\\u9879\\u76EE\\u4E2D\\u6709\\u4E00\\u4E9B\\u6A21\\u578B\\uFF0Cfbx\\u3001obj \\u4E4B\\u7C7B\\u7684\\u6587\\u4EF6\\u3002\\u4E4B\\u524D\\u5BF9 Three.js \\u7528\\u7684\\u6BD4\\u8F83\\u591A\\uFF0C\\u6240\\u4EE5\\u7B80\\u5355\\u642D\\u4E86\\u4E2A\\u67B6\\u5B50\\u5C31\\u5F00\\u59CB\\u4E0A\\u624B\\u9884\\u89C8\\uFF0C\\u53BB\\u627E\\u81EA\\u5DF1\\u60F3\\u8981\\u7684\\u4E1C\\u897F\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"627px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/25333e88e5628895091e992a1cf65cc8/59025/three.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"64.47876447876449%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAFlbTiJHB//xAAaEAACAgMAAAAAAAAAAAAAAAABAwASAhAR/9oACAEBAAEFAmGmCWFh5CJUDX//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAEAAgMAAAAAAAAAAAAAAAABEBEAAiH/2gAIAQEABj8CdsRqeFR//8QAGhABAQEBAAMAAAAAAAAAAAAAAREAIRAxcf/aAAgBAQABPyEGCzGTwXngCRKY9M+DTf/aAAwDAQACAAMAAAAQAw//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMUFRcf/aAAgBAQABPxBCFGA5XUNqaWfc8xeJNiWMIQ5y0FxE/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"three\",\n \"title\": \"three\",\n \"src\": \"/static/25333e88e5628895091e992a1cf65cc8/59025/three.jpg\",\n \"srcSet\": [\"/static/25333e88e5628895091e992a1cf65cc8/fca29/three.jpg 259w\", \"/static/25333e88e5628895091e992a1cf65cc8/f4507/three.jpg 518w\", \"/static/25333e88e5628895091e992a1cf65cc8/59025/three.jpg 627w\"],\n \"sizes\": \"(max-width: 627px) 100vw, 627px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u5176\\u4E2D\\u773C\\u775B\\u90E8\\u5206\\u5355\\u72EC\\u8FC7\\u6EE4\\u540E\\uFF0C\\u5206\\u89E3\\u4E0B\\u5F62\\u72B6\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"951px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/7d3bef049db721799b1fc219893336f4/fba4d/three-fbx.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"53.66795366795367%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAcu11YsoD//EABgQAQEBAQEAAAAAAAAAAAAAAAIBAwAh/9oACAEBAAEFAtEq8NFTKb22Z4GEzzv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAACAgMBAAAAAAAAAAAAAAAAAREhEBIxUf/aAAgBAQAGPwJ2+lqfSjaLISx//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARMSGBQf/aAAgBAQABPyGkeXw1By5GkGQWwvkTay32cYB2AFBRP//aAAwDAQACAAMAAAAQYw//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEAAwEBAAAAAAAAAAAAAAABABEhMVH/2gAIAQEAAT8Q3TIAlAeRMQdKKy3kdBBq4HIyaKW0LyFRBser7BAg4BP/2Q==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"three fbx\",\n \"title\": \"three fbx\",\n \"src\": \"/static/7d3bef049db721799b1fc219893336f4/fba4d/three-fbx.jpg\",\n \"srcSet\": [\"/static/7d3bef049db721799b1fc219893336f4/fca29/three-fbx.jpg 259w\", \"/static/7d3bef049db721799b1fc219893336f4/f4507/three-fbx.jpg 518w\", \"/static/7d3bef049db721799b1fc219893336f4/fba4d/three-fbx.jpg 951w\"],\n \"sizes\": \"(max-width: 951px) 100vw, 951px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u4ECE\\u524D\\u9762\\u770B\\u7684\\u8BDD\\uFF0C\\u80FD\\u591F\\u5927\\u6982\\u770B\\u5230\\u6574\\u4E2A\\u773C\\u775B\\u7684\\u6548\\u679C\\u4E86\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"829px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/87be723c2bedcf36a75bfc42a0ed8e57/275dc/three-cut.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"58.687258687258684%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHAdJQjaK//xAAZEAACAwEAAAAAAAAAAAAAAAACAwABEhD/2gAIAQEAAQUC62snBUGf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxABAQEBAAAAAAAAAAAAAAAAARAAIv/aAAgBAQAGPwKoQ53/xAAYEAEAAwEAAAAAAAAAAAAAAAABACExEP/aAAgBAQABPyHo4ghstgan/9oADAMBAAIAAwAAABCrD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQEBAAMAAAAAAAAAAAAAAAEAESExYf/aAAgBAQABPxAFkwnuKnEwLkD20CyFW//Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"three cut\",\n \"title\": \"three cut\",\n \"src\": \"/static/87be723c2bedcf36a75bfc42a0ed8e57/275dc/three-cut.jpg\",\n \"srcSet\": [\"/static/87be723c2bedcf36a75bfc42a0ed8e57/fca29/three-cut.jpg 259w\", \"/static/87be723c2bedcf36a75bfc42a0ed8e57/f4507/three-cut.jpg 518w\", \"/static/87be723c2bedcf36a75bfc42a0ed8e57/275dc/three-cut.jpg 829w\"],\n \"sizes\": \"(max-width: 829px) 100vw, 829px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u770B\\u7740\\u633A\\u597D\\u73A9\\uFF0C\\u4F46\\u5C31\\u50CF\\u4E0A\\u9762\\u8BF4\\u7684\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u6A21\\u578B\\u56FE\\uFF0C\\u6700\\u5F00\\u59CB\\u7684\\u95EE\\u9898\\u8FD8\\u662F\\u6CA1\\u89E3\\u51B3\\uFF0C\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u600E\\u4E48\\u628A\\u53C2\\u6570\\u5B9E\\u73B0\\u6210\\u56FE\\u50CF\\uFF1F\")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u4ED6\\u4EEC\\u600E\\u4E48\\u505A\\u7684\\uFF1F \\uD83D\\uDD0D\"), mdx(\"p\", null, \"\\u597D\\u5728\\u4ED6\\u4EEC\\u5F00\\u6E90\\u4E86\\u4E0D\\u6B62\\u8FD9\\u4E00\\u4E2A\\u52A8\\u753B\\u6587\\u4EF6\\u672C\\u8EAB\\uFF0C\\u4ED6\\u4EEC\\u8FD8\\u628A\\u4E3B\\u8981\\u7684\\u4EE3\\u7801\\u4ED3\\u5E93 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/digital-dream-labs/vector/blob/main/cannedAnimLib/proceduralFace/proceduralFaceDrawer.h#L70\"\n }, \"\\u5F00\\u6E90\"), \" \\u4E86\\uFF0C\\u5305\\u62EC\\u4E86\\u600E\\u4E48\\u753B\\u9762\\u90E8\\u7684\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/c28bdeeb5848783e066a30e5232de30e/d02af/draw-face.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"45.94594594594595%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVQoz1VSy27VMBTMb7Ji0S0IVKFu+BEWSHwUmxZxb7mkvY3zsBO/YjtOhnEulDbSyJbjc2bOjKsPN5/x7uMnvL++wZu3V/jy9Rs2ADFGTMbAOku4Hc57eMJxH0LA62/Dtm2oTmJE0zRIy7IfrOuKmBbEOUJ1CkPvoKeAcTKQSnO1O4z1CDGxcSL5gmVZ97ZVpwN+3p8Q/zFS3hxmZC8Qxkc41cFyncYHjKpGME9IcwvLdXYNvG1gpjOsPmOJPSpLJcdfNU71Izz3mUQpFVZPJQpaKxgzYuLeecORC4oNmvctJ4o7co7Y1oRK2YTb4wO+393jUAu4uHL8jDwHxNHAyMyRZwxSQbQdFU9wcoQmDG2wc6JV/52sHAuPHFkIgTVnlL/Fm+w8EhHDgpl3ShhF+UaPy70LVk607t6Xuj2UgSpaMufSrFjIwxJKthaSJL3s99CGvt+bvUz1VcZ/ZVZ1q6GkxIXkwlIUGh/RSQPRa7RyQqsMmmGCGDSE1BhGi57QPmFO63PT6nCm6Vq/YNmYMp8M03/qLOrG0tsBP07E7w63J4E74lB3aJRHwyelXHqu/wNptq/+7wbeBAAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"draw face\",\n \"title\": \"draw face\",\n \"src\": \"/static/c28bdeeb5848783e066a30e5232de30e/0dc48/draw-face.png\",\n \"srcSet\": [\"/static/c28bdeeb5848783e066a30e5232de30e/2c191/draw-face.png 259w\", \"/static/c28bdeeb5848783e066a30e5232de30e/86b01/draw-face.png 518w\", \"/static/c28bdeeb5848783e066a30e5232de30e/0dc48/draw-face.png 1035w\", \"/static/c28bdeeb5848783e066a30e5232de30e/d02af/draw-face.png 1295w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u9879\\u76EE\\u672C\\u8EAB\\u7528\\u5230\\u4E86 openCV\\uFF08\\u4E0A\\u6B21\\u7528\\u5230\\u8FD8\\u662F\\u5728\\u672C\\u79D1\\u7684\\u65F6\\u5019\\uFF09\\uFF0C\\u5F88\\u5F3A\\u5927\\u7684\\u4E00\\u4E2A\\u8BA1\\u7B97\\u673A\\u89C6\\u89C9\\u5E93\\uFF0C\\u867D\\u7136\\u5DF2\\u7ECF\\u5C01\\u88C5\\u7684\\u5F88\\u597D\\u4E86\\uFF0C\\u4F46\\u662F\\u5230\\u5904\\u90FD\\u662F Matrix \\u548C Vector \\u8FD8\\u662F\\u7740\\u5B9E\\u61F5\\u4E86\\u4E00\\u9635\\u5B50\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5...\\u76F4\\u63A5\\u65E0\\u8111\\u590D\\u523B\\u6574\\u4E2A\\u7ED8\\u5236\\u903B\\u8F91\\u4E0D\\u5C31\\u884C\\u4E86\\u5417\\uFF1F\\u800C\\u4E14\\u4E0D\\u5C31\\u662F CPP \\u561B\\uFF1F\\u4E0D\\u5C31\\u662F\\u77E9\\u9635\\u561B\\uFF1F\\u4E0D\\u5C31\\u662F\\u5411\\u91CF\\u8FD0\\u7B97\\u561B\\uFF1F\\u4E0D\\u5C31\\u662F openCV \\u561B\\uFF1F\\u90FD\\u5199\\u8FC7\\u7684\\u4E1C\\u897F\\uFF0C\\u5728 TypeScript \\u4E2D\\u590D\\u523B\\u6574\\u4E2A\\u903B\\u8F91\\u4E0D\\u4F1A\\u5F88\\u96BE\\u5427\\uFF0C\\u5F00\\u5E72\\uFF01\"), mdx(\"p\", null, \"\\u82B1\\u4E86\\u4E00\\u4E9B\\u65F6\\u95F4\\uFF0C\\u7528\\u4E86 opencv-ts\\u3001tstl\\u3001tsm \\u7B49\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u52A0\\u4E0A\\u5F88\\u591A\\u9B54\\u6539\\uFF0C\\u7EC8\\u4E8E\\u628A\\u4EE3\\u7801\\u4ECE C++ \\u8F6C\\u5230 TypeScript \\u4E0B\\u4E86\\uFF0C\\u56E0\\u4E3A\\u53EA\\u662F\\u4EE3\\u7801\\u7EA7\\u522B\\u7684\\u79FB\\u690D\\uFF0C\\u4E5F\\u90FD\\u662F\\u56FE\\u50CF\\u7EA7\\u522B\\u7684\\u6570\\u5B66\\u8BA1\\u7B97\\uFF0C\\u91CC\\u9762\\u7684\\u903B\\u8F91\\u4E0D\\u7528\\u8003\\u8651\\u592A\\u591A\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/c524dc8a910015e73d49ec8baacf5722/28bb8/recode.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"73.35907335907336%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAQAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAckRCpf/xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAWEAEBAQAAAAAAAAAAAAAAAAAQEQD/2gAIAQEAAT8hbqf/2gAMAwEAAgADAAAAEA8P/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRABAQEAAwAAAAAAAAAAAAAAAQAhEWFx/9oACAEBAAE/EAyfLkyQEjqdb//Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"recode\",\n \"title\": \"recode\",\n \"src\": \"/static/c524dc8a910015e73d49ec8baacf5722/dcf47/recode.jpg\",\n \"srcSet\": [\"/static/c524dc8a910015e73d49ec8baacf5722/fca29/recode.jpg 259w\", \"/static/c524dc8a910015e73d49ec8baacf5722/f4507/recode.jpg 518w\", \"/static/c524dc8a910015e73d49ec8baacf5722/dcf47/recode.jpg 1035w\", \"/static/c524dc8a910015e73d49ec8baacf5722/28bb8/recode.jpg 1117w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u8BF4\\u5B9E\\u8BDD\\u8FD9\\u4E2A\\u65F6\\u5019\\uFF0C\\u6211\\u7684\\u5185\\u5FC3\\u4E0D\\u662F\\u957F\\u8212\\u4E00\\u53E3\\u6C14\\uFF0C\\u800C\\u662F\\u5F88\\u62C5\\u5FC3\\uFF0C\\u56E0\\u4E3A\\u6211\\u77E5\\u9053\\u8FD9\\u79CD\\u4EE3\\u7801\\u79FB\\u690D\\u4E0D\\u53EF\\u80FD\\u4E00\\u6B21\\u6210\\u529F\\uFF0C\\u5C24\\u5176\\u6D89\\u53CA\\u5230\\u5468\\u8FB9\\u5176\\u4ED6\\u6587\\u4EF6\\u7684\\u903B\\u8F91\\uFF0C\\u6BD5\\u7ADF\\u539F\\u4EE3\\u7801\\u6211\\u6CA1\\u8DD1\\u8D77\\u6765\\uFF0C\\u6240\\u4EE5\\u66F4\\u9700\\u8981\\u5F88\\u591A\\u8C03\\u8BD5\\uFF0C\\u751A\\u81F3\\u4E00\\u4E2A\\u8FD0\\u7B97\\u9519\\u8BEF\\u90FD\\u8981\\u6392\\u67E5\\u5F88\\u4E45\\uFF0C\\u67D0\\u4E00\\u4E2A\\u77E9\\u9635\\u76F8\\u4E58\\u7684\\u6B63\\u786E\\u6027\\u51FA\\u9519\\u4E86\\u90FD\\u5F88\\u96BE\\u5B9A\\u4F4D\\u5230\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8003\\u8651\\u4E86\\u4E00\\u4E0B\\uFF0C\\u51B3\\u5B9A\\u4E0D\\u82B1\\u8D39\\u8FD9\\u4E48\\u5927\\u7CBE\\u529B\\u53BB\\u8C03\\u8BD5\\u4E86\\u3002\\u5373\\u4F7F\\u6211\\u53EF\\u4EE5\\u4E00\\u4E2A\\u4E2A\\u51FD\\u6570\\u7684\\u8C03\\u8BD5\\uFF0C\\u751A\\u81F3\\u53EF\\u80FD\\u534A\\u4E2A\\u5C0F\\u65F6\\u8C03\\u8BD5\\u6210\\u529F\\uFF0C\\u6700\\u7EC8\\u80FD\\u591F 100% \\u590D\\u523B\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E2A side project \\u6211\\u4E0D\\u592A\\u60F3\\u8D4C\\u8FD9\\u4E2A\\u65F6\\u95F4\\u4E86\\uFF0C\\u5982\\u679C\\u6709\\u4EBA\\u7ED9\\u94B1\\u8FD8\\u884C\\uFF0C\\u5982\\u679C\\u518D\\u8981\\u4E00\\u5929\\u751A\\u81F3\\u66F4\\u957F\\u65F6\\u95F4\\u90FD\\u4E0D\\u4E00\\u5B9A\\u8C03\\u8BD5\\u51FA\\u6765\\uFF0C\\u6210\\u672C\\u592A\\u9AD8\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u522B\\u4EBA\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\u4E0D\\u52A0\\u601D\\u8003\\u76F4\\u63A5\\u642C\\u8FD0\\uFF0C\\u5728\\u67D0\\u4E9B\\u573A\\u666F\\u53EF\\u4EE5\\u5B9E\\u73B0\\u6548\\u679C\\uFF0C\\u4F46\\u662F\\u5982\\u679C\\u903B\\u8F91\\u6BD4\\u8F83\\u590D\\u6742\\u3001\\u9ED1\\u76D2\\u7F15\\u4E0D\\u51FA\\u6765\\u8109\\u7EDC\\u7684\\u8BDD\\uFF0C\\u6700\\u7EC8\\u4EA4\\u4ED8\\u4F1A\\u51FA\\u95EE\\u9898\\u7684\\uFF0C\\u4E0D\\u7BA1\\u600E\\u4E48\\u6837\\u6E90\\u7801\\u8FD8\\u662F\\u8981\\u8BFB\\u4E00\\u8BFB\\u7684\\u3002\")), mdx(\"h2\", null, \"\\u516D\\u3001\\u53EA\\u5173\\u5FC3\\u6838\\u5FC3\\u7ED8\\u5236\\u53C2\\u6570\\u7684\\u610F\\u4E49\"), mdx(\"h3\", null, \"1 \\u731C\\u53C2\\u6570\\u5230\\u8C03\\u53C2\\u6570\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u770B\\u5230\\u4E4B\\u524D\\u7684 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/pose-d2f61c6ea6ec320dcbf49170c4ae30d6.json\"\n }, \"pose.json\"), \" \\u5DF2\\u7ECF\\u5927\\u6982\\u77E5\\u9053\\u6709\\u54EA\\u4E9B\\u63A7\\u5236\\u4E86\\uFF0C\\u5C31\\u662F\\u4E0D\\u592A\\u6E05\\u695A\\u8FD9\\u4E9B\\u63A7\\u5236\\u53C2\\u6570\\u65BD\\u52A0\\u5728\\u90A3\\u4E9B\\u5143\\u7D20\\u4E0A\\uFF0C\\u539F\\u59CB\\u903B\\u8F91\\u4E5F\\u90FD\\u662F\\u77E9\\u9635\\u8FD0\\u7B97\\uFF0C\\u5E76\\u4E0D\\u662F\\u5F88\\u6E05\\u6670\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7...\\u4E0D\\u5C31\\u662F\\u731C\\u561B\\uFF1F\\uFF01\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"metadata\\\": \\\"...\\\",\\n \\\"objects\\\": {\\n \\\"x:eyeCorner_L_innerBtm_ctrl\\\": {\\n \\\"attrs\\\": {\\n \\\"scaleX\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 0.9363065595417932 },\\n \\\"scaleY\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0393205391389768 }\\n }\\n },\\n \\\"x:mech_eye_R_ctrl\\\": {\\n \\\"attrs\\\": {\\n \\\"translateX\\\": { \\\"type\\\": \\\"doubleLinear\\\", \\\"value\\\": 0.0 },\\n \\\"translateY\\\": { \\\"type\\\": \\\"doubleLinear\\\", \\\"value\\\": 0.0 },\\n \\\"GlowSize\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 0.5 },\\n \\\"scaleX\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0434263501720864 },\\n \\\"scaleY\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0434263501720864 },\\n \\\"rotateZ\\\": { \\\"type\\\": \\\"doubleAngle\\\", \\\"value\\\": 0.0 },\\n \\\"Lightness\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0 }\\n }\\n },\\n // ...\\n}\\n\")), mdx(\"p\", null, \"\\u4F4D\\u79FB\\u65CB\\u8F6C\\u4EC0\\u4E48\\u7684\\u57FA\\u672C\\u4E0A\\u90FD\\u80FD\\u591F\\u77E5\\u9053\\u4E86\\uFF0C\\u5728\\u4EE3\\u7801\\u79FB\\u690D\\u7684\\u8FC7\\u7A0B\\u4E2D\\u57FA\\u672C\\u4E0A\\u90FD\\u77E5\\u9053\\u5404\\u4E2A\\u53C2\\u6570\\u7684\\u610F\\u4E49\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u9605\\u8BFB\\u4E86\\u4E24\\u904D\\u539F\\u59CB\\u7684\\u7ED8\\u5236\\u4EE3\\u7801\\uFF0C\\u4E5F\\u57FA\\u672C\\u4E0A\\u77E5\\u9053\\u4E86\\u56FE\\u50CF\\u5F62\\u72B6\\u3001\\u5706\\u89D2\\u3001\\u4F4D\\u7F6E\\u4E4B\\u7C7B\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"h3\", null, \"2 \\u5148\\u8DD1\\u8D77\\u6765\\u662F\\u4E00\\u4E2A\\u7A0B\\u5E8F\\u5F88\\u4E0D\\u9519\\u7684\\u5F00\\u59CB\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u6211\\u4EEC\\u5C31\\u610F\\u8BC6\\u5230\\u4E86\\uFF0C\\u90A3\\u4E9B\\u66F2\\u7EBF\\u53EA\\u662F\\u793A\\u610F\\u56FE\\uFF0C\\u4F46\\u662F\\u5374\\u63D0\\u793A\\u6211\\u4EEC\\u5927\\u81F4\\u5404\\u4E2A\\u90E8\\u4F4D\\u7684\\u4F4D\\u7F6E\\u3002\"), mdx(\"p\", null, \"\\u81F3\\u4E8E\\u7528 css\\u3001svg\\u3001canvas \\u90FD\\u662F\\u7ED8\\u5236\\u7684\\u4E0D\\u540C\\u5B9E\\u73B0\\uFF0C\\u521A\\u5F00\\u59CB\\u5148\\u7528\\u6700\\u5BB9\\u6613\\u5B9E\\u73B0\\u7684 div + css \\u642D\\u51FA\\u6765\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n\")), mdx(\"p\", null, \"\\u51E0\\u4E2A\\u5173\\u952E\\u7684\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"css border-radius \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top-left-radius\"\n }, \"\\u652F\\u6301\\u692D\\u5706\\u5F27\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u90E8\\u5206\\u53C2\\u6570\\u7684\\u8BBE\\u7F6E\\u533A\\u5206\\u5DE6\\u53F3\\uFF0C\\u914D\\u7F6E\\u6587\\u4EF6\\u7684\\u5DE6\\u53F3\\u548C\\u89C6\\u89C9\\u7684\\u5DE6\\u53F3\\u76F8\\u53CD\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5F88\\u591A\\u6570\\u636E\\u4E0D\\u662F\\u5728\\u4E00\\u4E2A\\u9879\\u76EE\\u91CC\\u9762\\uFF0C\\u6240\\u4EE5\\u627E\\u8D77\\u6765\\u5F88\\u9EBB\\u70E6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53C2\\u6570\\u7684\\u5E94\\u7528\\u591A\\u8BD5\\u8BD5\\u5C31\\u884C\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u539F\\u9879\\u76EE\\u7684\\u7ED8\\u5236\\u90FD\\u662F\\u5B9A\\u4F4D\\u505A\\u7684\\uFF0C\\u6240\\u4EE5\\u4E3A\\u4E86\\u5BB9\\u6613\\u8C03\\u8BD5\\uFF0C\\u4E5F\\u90FD\\u6CA1\\u7528 flex \\u4E4B\\u7C7B\\u7684\\u5E03\\u5C40\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B9A\\u4F4D\\u53EF\\u4EE5\\u4F7F\\u7528 absolute + top\\u3001left \\u6216\\u8005 transform: translate\\uFF0C\\u540E\\u8005\\u6027\\u80FD\\u66F4\\u597D\\u4F46\\u662F scale \\u548C translate \\u7B49\\u6548\\u679C\\u4F1A\\u53E0\\u52A0\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"overflow: hidden; \\u7684\\u5B9E\\u73B0\\u5728\\u90E8\\u5206\\u6D4F\\u89C8\\u5668\\u4E0A\\u5B58\\u5728\\u8FB9\\u754C\\u9732\\u8FB9\\u95EE\\u9898\\uFF0C\\u53EF\\u4EE5\\u7528 clip-path \\u4EE3\\u66FF\\uFF08\\u6240\\u4EE5\\u773C\\u7751\\u7684\\u5B9E\\u73B0\\u4E0D\\u7528div\\uFF0C\\u800C\\u662F\\u7528 clip-path \\u7684\\u6837\\u5F0F\\u76F4\\u63A5\\u5207\\u51FA\\u6765\\uFF0C\\u4E0A\\u9762\\u7684 html \\u7ED3\\u6784\\u4E5F\\u56E0\\u6B64\\u6539\\u53D8\\u4E86\\uFF09\")), mdx(\"p\", null, \"\\u4E00\\u70B9\\u6E90\\u7801\\u9605\\u8BFB\\uFF0C\\u52A0\\u4E0A\\u4E00\\u70B9\\u70B9\\u7EC6\\u8282\\uFF08\\u5404\\u79CD CSS: border-radius\\u3001position \\u548C transform\\u3001clip-path\\uFF09\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"458px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/5ca58e45eb33b3d5be56b749f96b1ffe/83f20/tryout.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"50.57915057915058%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQP/2gAMAwEAAhADEAAAAYuyaZgU/8QAFxABAQEBAAAAAAAAAAAAAAAAAgMBIP/aAAgBAQABBQKJx0UBg4//xAAXEQEAAwAAAAAAAAAAAAAAAAABAhAx/9oACAEDAQE/AWKu1//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAZEAEAAgMAAAAAAAAAAAAAAAABAAIRIDH/2gAIAQEABj8CKrgl0vzX/8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAIDFBUf/aAAgBAQABPyFqI3H5DiO1/9oADAMBAAIAAwAAABCcD//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEVH/2gAIAQMBAT8QtBAxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxAAYk//xAAaEAACAgMAAAAAAAAAAAAAAAABIRARAEFR/9oACAEBAAE/EG05fCw5G04aQJ//2Q==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"tryout\",\n \"title\": \"tryout\",\n \"src\": \"/static/5ca58e45eb33b3d5be56b749f96b1ffe/83f20/tryout.jpg\",\n \"srcSet\": [\"/static/5ca58e45eb33b3d5be56b749f96b1ffe/fca29/tryout.jpg 259w\", \"/static/5ca58e45eb33b3d5be56b749f96b1ffe/83f20/tryout.jpg 458w\"],\n \"sizes\": \"(max-width: 458px) 100vw, 458px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"443px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/f579b/css-1.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"52.89575289575289%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAebL1s7xgr//xAAbEAADAAIDAAAAAAAAAAAAAAABAgMAEwQREv/aAAgBAQABBQLbSzt6mIcipTWvSIpyKKF//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/ASuf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAgIDAQEAAAAAAAAAAAAAAAECEQMxQVFh/9oACAEBAAY/Akp5a+iks1u/R3Lpo0a6f//EABwQAAICAgMAAAAAAAAAAAAAAAABESExcZGhsf/aAAgBAQABPyFb6CiqKwQckuiHPfpixz2HmOQ//9oADAMBAAIAAwAAABAA7//EABcRAAMBAAAAAAAAAAAAAAAAAAEQIRH/2gAIAQMBAT8QNGxf/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARMf/aAAgBAgEBPxASsj//xAAeEAEAAgIBBQAAAAAAAAAAAAABABEhMVFBYXHB8f/aAAgBAQABPxBAxBBKnmqh1sRilaatxiIjVsvAPHeHA7Cz7R+urWR7gDQW6uCf/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"css 1\",\n \"title\": \"css 1\",\n \"src\": \"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/f579b/css-1.jpg\",\n \"srcSet\": [\"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/fca29/css-1.jpg 259w\", \"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/f579b/css-1.jpg 443w\"],\n \"sizes\": \"(max-width: 443px) 100vw, 443px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"669px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/4663f/css-2.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"38.996138996138995%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABo6IXANP/xAAXEAEBAQEAAAAAAAAAAAAAAAADAQAC/9oACAEBAAEFAidL3EXRG3//xAAXEQADAQAAAAAAAAAAAAAAAAABAhAh/9oACAEDAQE/AVGT/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGhAAAgIDAAAAAAAAAAAAAAAAAAIBkSIxMv/aAAgBAQAGPwKM3Omo21H/xAAYEAEBAQEBAAAAAAAAAAAAAAABABEhQf/aAAgBAQABPyEJGcdFsfRb6If/2gAMAwEAAgADAAAAEIAP/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERUf/aAAgBAwEBPxCkEWH/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QXG1v/8QAGxABAAIDAQEAAAAAAAAAAAAAARFBACExUfD/2gAIAQEAAT8Q6ZeELGoLxV4QEq1XuKFkL85n/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"css 2\",\n \"title\": \"css 2\",\n \"src\": \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/4663f/css-2.jpg\",\n \"srcSet\": [\"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/fca29/css-2.jpg 259w\", \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/f4507/css-2.jpg 518w\", \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/4663f/css-2.jpg 669w\"],\n \"sizes\": \"(max-width: 669px) 100vw, 669px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"675px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/2eae0f01b2ff8f335f095552b546f42d/b5890/css-3.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"37.83783783783784%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHPnEsBf//EABkQAAIDAQAAAAAAAAAAAAAAAAIDAAEEEv/aAAgBAQABBQIdLZWlvKHuIf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAdEAAABgMBAAAAAAAAAAAAAAAAAQIDESESIlEx/9oACAEBAAY/AqcXMC3lEfMRso/eD//EABkQAAMAAwAAAAAAAAAAAAAAAAABESExYf/aAAgBAQABPyGnKpsfvkUaWww//9oADAMBAAIAAwAAABCID//EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAwEBPxBSS5//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAZ/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARIUFh/9oACAEBAAE/ENA0iVS64bfYx2Wgx5tdgPyi0GUeT//Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"css 3\",\n \"title\": \"css 3\",\n \"src\": \"/static/2eae0f01b2ff8f335f095552b546f42d/b5890/css-3.jpg\",\n \"srcSet\": [\"/static/2eae0f01b2ff8f335f095552b546f42d/fca29/css-3.jpg 259w\", \"/static/2eae0f01b2ff8f335f095552b546f42d/f4507/css-3.jpg 518w\", \"/static/2eae0f01b2ff8f335f095552b546f42d/b5890/css-3.jpg 675w\"],\n \"sizes\": \"(max-width: 675px) 100vw, 675px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/614a7/css-code.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"59.07335907335908%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHky5Shf//EABYQAAMAAAAAAAAAAAAAAAAAAAABIP/aAAgBAQABBQKWf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABkQAAIDAQAAAAAAAAAAAAAAAAABEBExcf/aAAgBAQABPyFs6PS40f/aAAwDAQACAAMAAAAQHA//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERMSFxwf/aAAgBAQABPxBsi55SvtW4bfSsGo0cbP/Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"css code\",\n \"title\": \"css code\",\n \"src\": \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/dcf47/css-code.jpg\",\n \"srcSet\": [\"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/fca29/css-code.jpg 259w\", \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/f4507/css-code.jpg 518w\", \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/dcf47/css-code.jpg 1035w\", \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/614a7/css-code.jpg 1187w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u592A\\u6709\\u610F\\u601D\\u4E86\\uFF0C\\u8FC7\\u7A0B\\u4E2D\\u82B1\\u8D39\\u4E86\\u5F88\\u591A\\u7684\\u5FC3\\u601D\\uFF0C\\u5B9E\\u73B0\\u6548\\u679C\\u56E0\\u4E3A\\u4E0D\\u4F18\\u96C5\\uFF0C\\u4E5F\\u6539\\u4E86\\u4E09\\u56DB\\u7248\\u6574\\u4E2A\\u4EE3\\u7801\\uFF0C\\u4E0D\\u592A\\u60F3\\u5C06\\u5C31\\u561B\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4E0D\\u60F3\\u5728\\u5B9E\\u73B0\\u7EC6\\u8282\\u4E0A\\u6D6A\\u8D39\\u592A\\u591A\\u53E3\\u820C\\uFF0C\\u4E5F\\u65E0\\u610F\\u505A\\u624B\\u628A\\u624B\\u6559\\u7A0B\\u4EC0\\u4E48\\u7684\\uFF0C\\u6240\\u4EE5\\u4EE3\\u7801\\u51E0\\u4E4E\\u6CA1\\u8D34\\uFF0C\\u6709\\u611F\\u5174\\u8DA3\\u7684\\u53EF\\u4EE5\\u8054\\u7CFB\\u6211\\u4E00\\u8D77\\u4EA4\\u6D41\\uFF0C\\u867D\\u7136\\u5F88\\u559C\\u6B22\\u5F00\\u6E90\\u7CBE\\u795E\\uFF0C\\u4F46\\u662F\\u4F38\\u624B\\u515A\\u90A3\\u4E48\\u591A\\u7684\\u73B0\\u5728\\uFF0C\\u6709\\u610F\\u601D\\u7684\\u4E2A\\u4EBA\\u9879\\u76EE\\u8FD8\\u662F\\u6342\\u7740\\u5427\\uFF0C\\u5982\\u679C\\u54EA\\u5929\\u5F00\\u5FC3\\u4E86\\u518D\\u5F00\\u6E90\\u51FA\\u6765\\u3002\")), mdx(\"h2\", null, \"\\u4E03\\u3001\\u6700\\u7EC8\\u6548\\u679C \\uD83C\\uDF89\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/fccbb02c02edd364db50730c6aa746de/3aba4/my-vector.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"74.13127413127414%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABc670k0B//8QAGxAAAQQDAAAAAAAAAAAAAAAAAwABAhIEEBP/2gAIAQEAAQUC7DQ3u9E2IFDFCGv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAeEAABBAEFAAAAAAAAAAAAAAABAAIRMgMQM3Ghsf/aAAgBAQAGPwLd9RDcskcqzlTtEtbE6f/EABwQAAICAgMAAAAAAAAAAAAAAAABEUEhMWGB8P/aAAgBAQABPyGa66CLiGkHsxWedsP0T7ZbIR//2gAMAwEAAgADAAAAENs//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QiP/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKf/xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFhcf/aAAgBAQABPxAahYaBO3qsirC2UQLmMMbZF4A8tO+bkNKYO419Z5T/2Q==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"my vector\",\n \"title\": \"my vector\",\n \"src\": \"/static/fccbb02c02edd364db50730c6aa746de/dcf47/my-vector.jpg\",\n \"srcSet\": [\"/static/fccbb02c02edd364db50730c6aa746de/fca29/my-vector.jpg 259w\", \"/static/fccbb02c02edd364db50730c6aa746de/f4507/my-vector.jpg 518w\", \"/static/fccbb02c02edd364db50730c6aa746de/dcf47/my-vector.jpg 1035w\", \"/static/fccbb02c02edd364db50730c6aa746de/3aba4/my-vector.jpg 1065w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/my-vector-99e5425ec085d7ad0dd149de57843425.mp4\"\n }), mdx(\"p\", null, \"\\u539F\\u7248\\u76F8\\u6BD4\\u8FD8\\u6709\\u968F\\u673A\\u566A\\u70B9\\u3001\\u626B\\u63CF\\u7EBF\\u3001\\u53D1\\u5149\\u548C\\u4EAE\\u5EA6\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u4E9B\\u90FD\\u662F\\u7B80\\u5355\\u7684\\u7EC6\\u8282\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u516B\\u3001\\u52A8\\u8D77\\u6765 \\uD83D\\uDD79\"), mdx(\"p\", null, \"\\u6587\\u7AE0\\u884C\\u81F3\\u6B64\\u5904\\u5DF2\\u7ECF\\u5570\\u55E6\\u5F88\\u957F\\u4E86\\uFF0C\\u5B9E\\u73B0\\u9759\\u6001\\u7684\\u8868\\u60C5\\uFF0C\\u9876\\u591A\\u662F\\u5207\\u6362\\u7684\\u65F6\\u5019\\u7528 css \\u7684\\u52A8\\u753B\\u5B9E\\u73B0\\u4E86\\u8F6C\\u6362\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u540E\\u9762\\u7684\\u539F\\u5382\\u52A8\\u753B\\u65B0\\u5F00\\u4E0B\\u4E00\\u7BC7\\u6587\\u7AE0\\u5199\\u3002\"), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.ubug.io/k_vrc\"\n }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u6F14\\u793A\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u52A8\\u753B\\u7684\\u5B9E\\u73B0\\u5728\\u6700\\u540E\\u7528 SVG \\u548C Canvas \\u91CD\\u6784\\u4E86\\uFF0C\\u6240\\u4EE5\\u672C\\u7BC7\\u6587\\u7AE0\\u7684\\u793A\\u4F8B\\u4EE3\\u7801\\u770B\\u770B\\u5C31\\u884C\\uFF0C\\u800C\\u4E14\\u6211\\u7684\\u5927\\u90E8\\u5206\\u6587\\u7AE0\\u4E00\\u822C\\u4E0D\\u6D89\\u53CA\\u624B\\u628A\\u624B\\u7684\\u4EE3\\u7801\\u7EC6\\u8282\\u3002\")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}